纯JS,仿安卓toast,ios警告框

<!DOCTYPE html>  <html>  <head>  <meta charset="utf-8" >  <title>纯JS,仿安卓toast,ios警告框</title>  <meta name="viewport" , content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <style> body{background-color:#000} </style>  </head>  <body></body>  <script language="javascript" type="text/javascript">      //nativeTip('类原生的toast方法');     nativeAlert('温馨提示', '类原生的警告框方法') //先设背景为黑色方便观察          //类原生的toast方法        function nativeTip(msg,duration) {         duration=isNaN(duration)?3000:duration;         var m = document.createElement('div');         m.innerHTML = msg;         m.style.cssText="width: 60%;min-width: 150px;opacity: 0.7;height: 30px;color: rgb(255, 255, 255);line-height: 30px;text-align: center;border-radius: 5px;position: fixed;top: 40%;left: 20%;z-index: 999999;background: rgb(0, 0, 0);font-size: 12px;";         document.body.appendChild(m);         setTimeout(function() {             var d = 0.5;             m.style.webkitTransition = '-webkit-transform ' + d + 's ease-in, opacity ' + d + 's ease-in';             m.style.opacity = '0';             setTimeout(function() { document.body.removeChild(m) }, d * 1000);         }, duration);     }      //类原生的警告框方法      function nativeAlert(title, msg) {         var m = document.createElement('div');          var html='<div style="position:fixed;top:25%;width:100%;max-width:640px;">'             html+='<div style="width:80%;margin-left:10%;padding:2% 0 0;background:#fff;border-radius:8px;color:#000;">'             html+='    <h3 style="font-size:1rem;text-align:center;">'+title+'</h3>'             html+='    <p style="font-size:0.9rem;line-height:1.5rem;width:90%;margin:5% auto;text-align:center;">'+msg+'</p>'             html+='    <div id="nativeAlert-btn" style="width:100%;height:2.6rem;line-height:2.6rem;border-top:1px solid #d4d4d4; color:#0383fe;text-align:center;">确定</div>'             html+='</div>'             html+='</div>'         m.innerHTML = html;          document.body.appendChild(m);         document.getElementById("nativeAlert-btn").onclick =function(){             var d = 0.5;             m.style.webkitTransition = '-webkit-transform ' + d + 's ease-in, opacity ' + d + 's ease-in';             m.style.opacity = '0';             setTimeout(function() { document.body.removeChild(m) }, d * 1000);          }      } </script>   </html>

相关文章
相关标签/搜索