移動端點選彈出提示視窗程式碼例項
分享一段程式碼例項,它實現了移動端點選彈出提示視窗的效果。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0"/> <title>螞蟻部落</title> <style type="text/css"> * { margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; -webkit-overflow-scrolling: touch; font-family: "Helvetica Neue",Helvetica,"songti",STHeiTi,sans-serif; font-size: 16px; } .main { width: 332px; height: auto; margin: 100px auto; } .input { width: 300px; padding: 10px 15px; border: 1px solid #ddd; border-radius: 4px; -webkit-appearance: none; } .button { outline: none; -webkit-appearance: none; border: none; color: #fff; font-size: 18px; width: 300px; height: 46px; background: #189cfb; border-radius: 4px; margin-top: 30px; -webkit-transition: 0.3s; cursor: pointer; } .button:active { background: #1170b4; } /*不想多寫ie等瀏覽器相容的分割線*/ .alert { min-width: 10px; max-width: 280px; position: fixed; bottom: 80px; background: rgba(0,0,0,0.6); border-radius: 6px; color: #eee; font-size: 16px; padding: 10px 15px; text-align: center; box-shadow: 0 1px 4px rgba(0,0,0,0.3); left: 50%; -webkit-transform: translate3d(-50%,0,0); -webkit-animation: alert 4s; } @-webkit-keyframes alert { 0% { -webkit-transform: translate3d(-50%,0,0); opacity: 0; } 10% { -webkit-transform: translate3d(-50%,-30px,0); } 15% { -webkit-transform: translate3d(-50%,-25px,0); opacity: 1; } 100% { -webkit-transform: translate3d(-50%,-25px,0); } } </style> </head> <body> <div class="main"> <input type="search" class="input" value="螞蟻部落"> <button class="button" id="btn">檢視效果</button> </div> <script type="text/javascript"> var btn = document.querySelector('#btn'); btn.onclick = function() { var t = document.querySelector('input').value; msg.alert(t) } var msg = { alert: function(t) { var alt = document.querySelector('.alert'); if (alt) { alt.innerHTML = t; return; }; var h = document.createElement('div'); h.innerHTML = t || '為什麼不說話 (╰_╯)'; h.setAttribute('class', 'alert'); document.querySelector('body').appendChild(h); msg.fire(h); }, fire: function(obj) { var evt = ['webkitAnimationEnd', 'mozAnimationEnd', 'msAnimationEnd', 'oAnimationEnd', 'animationEnd']; for (var index = 0; index < evt.length; index++) { obj.addEventListener(evt[index], function() { this.parentNode.removeChild(this); }); } } }; </script> </body> </html>
相關文章
- 點選連結<a>彈出確認視窗程式碼例項
- 點選頂部彈出提示層程式碼例項
- 關閉瀏覽器視窗彈出提示程式碼例項瀏覽器
- 點選彈出帶有灰色背景使用者登入視窗程式碼例項
- 點選彈出水平垂直居中視窗程式碼例項
- javascript自帶的彈出輸出視窗程式碼例項JavaScript
- 點選彈出鎖屏層例項程式碼
- 點選彈出半透明層程式碼例項
- 可以限定拖動範圍的彈出視窗效果程式碼例項
- javascript實現的點選彈出刪除提示框程式碼例項JavaScript
- jQuery點選顯示彈出層例項程式碼jQuery
- 點選左右箭頭可以移動選項例項程式碼
- js實現彈出灰色背景能夠拖動的視窗例項程式碼JS
- js實現的點選彈出確認視窗程式碼JS
- 彈出視窗程式碼
- 關閉瀏覽器視窗彈出警告視窗程式碼例項瀏覽器
- window.open()實現彈出視窗居中顯示程式碼例項
- 點選文字框彈出可檢索下拉選單程式碼例項
- 滑鼠懸浮連結彈出提示程式碼例項
- 點選連結a彈出一個確認框例項程式碼
- 點選刪除彈出提示是否刪除程式碼
- 點選彈出帶有遮罩的視窗效果遮罩
- 自定義滑鼠懸浮連結彈出提示程式碼例項
- js點選彈出和隱藏一個div層效果程式碼例項JS
- 移動端div塊拖動效果程式碼例項
- 關閉網頁彈出提示視窗網頁
- 點選彈出居中帶有透明遮罩層視窗遮罩
- 點選文字框彈出可供選擇的checkbox核取方塊程式碼例項
- 移動端彈窗輸入密碼的那些事密碼
- 手機移動端點選超連結既可以撥打電話程式碼例項
- 廣告彈窗/小視窗程式碼
- jQuery實現的彈出垂直水平居中視窗效果程式碼例項jQuery
- 直播系統程式碼,點選選擇欄,彈出各個選項
- zepto點選檢視密碼明文效果程式碼例項密碼
- 移動端判斷觸屏位置程式碼例項
- 移動端字型大小自適應程式碼例項
- jQuery實現的點選彈出登陸視窗效果jQuery
- 右下角緩慢出現廣告視窗例項程式碼