純JS，仿安卓toast，ios警告框

時間 2019-12-11

原文原文鏈接

<!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>javascript

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。