html5+css3实现手机toast提示

  1. >  
  2. <html>  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
  5. <title>自定义Toast,类似于android的Toasttitle>  
  6. <style>  
  7. body {  
  8.     font-family: 'Lucida Grande', 'Helvetica', sans-serif;  
  9. }  
  10.   
  11. style>  
  12. <script>  
  13. //自定义弹框  
  14. function Toast(msg,duration){  
  15.     duration=isNaN(duration)?3000:duration;  
  16.     var m = document.createElement('div');  
  17.     m.innerHTML = msg;  
  18.     m.style.cssText="width:60%; min-width:150px; background:#000; opacity:0.5; height:40px; color:#fff; line-height:40px; text-align:center; border-radius:5px; position:fixed; top:40%; left:20%; z-index:999999; font-weight:bold;";  
  19.     document.body.appendChild(m);  
  20.     setTimeout(function() {  
  21.         var d = 0.5;  
  22.         m.style.webkitTransition = '-webkit-transform ' + d + 's ease-in, opacity ' + d + 's ease-in';  
  23.         m.style.opacity = '0';  
  24.         setTimeout(function() { document.body.removeChild(m) }, d * 1000);  
  25.     }, duration);  
  26. }  
  27. script>   
  28. head>  
  29. <body>  
  30. <button onclick="Toast('您点击了弹框按钮!',2000);">Toastbutton>  
  31. body>  
  32. html>  

你可能感兴趣的:(html5技术积累)