jquery自动弹出遮罩层或点击弹出遮罩层

时间  2019-12-06 标签 jquery 自动 弹出 点击
  1. 转自：http://blog.csdn.net/haibo0668/article/details/53402126

  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  4. <html xmlns="http://www.w3.org/1999/xhtml">  
  5. <head>  
  6. <title>jQuery简便实现遮罩层</title>  
  7. <meta charset="utf-8">  
  8. <meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;">
  9. <style>  
  10. body {   
  11. font-family:Arial, Helvetica, sans-serif;   
  12. font-size:12px;   
  13. margin:0;   
  14. }   
  15. #main {   
  16. height:1800px;   
  17. padding-top:90px;   
  18. text-align:center;   
  19. }   
  20. #fullbg {   
  21. background-color:gray;   
  22. left:0;   
  23. opacity:0.8;   
  24. position:absolute;   
  25. top:0;   
  26. z-index:3;   
  27. filter:alpha(opacity=80);   
  28. -moz-opacity:0.5;   
  29. -khtml-opacity:0.5;   
  30. }   
  31. #dialog {   
  32. background-color:#fff;   
  33. border:5px solid rgba(0,0,0, 0.8);   
  34. height:400px;   
  35. left:50%;   
  36. margin:-200px 0 0 -200px;   
  37. padding:1px;   
  38. position:fixed !important; /* 浮动对话框 */   
  39. position:absolute;   
  40. top:50%;   
  41. width:400px;   
  42. z-index:5;   
  43. border-radius:5px;   
  44. display:none;   
  45. }   
  46. #dialog p {   
  47. margin:0 0 12px;   
  48. height:24px;   
  49. line-height:24px;   
  50. background:#CCCCCC;   
  51. }   
  52. #dialog p.close {   
  53. text-align:right;   
  54. padding-right:10px;   
  55. }   
  56. #dialog p.close a {   
  57. color:#fff;   
  58. text-decoration:none;   
  59. }   
  60. </style>  
  61. <script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery/jquery-1.10.2.min.js"></script>  
  62. <script>  
  63. $(document).ready(function(){    
  64.  showBg();  
  65. });   
  66. </script>  
  67. <script type="text/javascript">  
  68.   
  69. //显示灰色 jQuery 遮罩层   
  70. function showBg() {   
  71.     var bh = $("body").height();   
  72.     var bw = $("body").width();   
  73.     $("#fullbg").css({   
  74.         height:bh,   
  75.         width:bw,   
  76.         display:"block"   
  77.     });   
  78.  $("#dialog").show();   
  79. }   
  80. //关闭灰色 jQuery 遮罩   
  81. function closeBg() {   
  82. $("#fullbg,#dialog").hide();   
  83. }   
  84. </script>  
  85. </head>  
  86. <body>  
  87. <div id="main"><a href="javascript:showBg();">点击这里查看效果</a>   
  88. <div id="fullbg"></div>   
  89. <div id="dialog">   
  90.     <p class="close"><a href="#" onclick="closeBg();">关闭</a></p>   
  91.     <div>正在加载，请稍后....</div>   
  92. </div>   
  93. </div>   
  94. </body>  
  95. </html>
联系我们 沪ICP备13005482号-10