Javascript 弹窗 

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>弹窗</title>
 6         <style type="text/css">
 7             #mask{
 8                 position: fixed;
 9                 left: 0;
10                 right: 0;
11                 top: 0;
12                 bottom: 0;
13                 background: rgba(0,0,0,.6);
14                 z-index: 100;
15             }
16             
17             #maskCont{
18                 position: absolute;
19                 width: 500px;
20                 height: 400px;
21                 background: rgba(255,255,255,1);
22             }
23             
24             #closeMask{
25                 position: absolute;
26                 right: -15px;
27                 top: -15px;
28                 width: 30px;
29                 height: 30px;
30                 background: url(20-close.png) no-repeat left top;
31                 background-size: 100% 100%;
32                 cursor: pointer;
33             }
34         </style>
35     </head>
36     <body style="height: 2000px;">
37         <input type="button" id="showDiv" value="点击弹出层" />
38         <input type="button" id="showDiv1" value="点击弹出层1" />
39         <script type="text/javascript">
40             var htmlStr = "";
41             
42             function showOpen(){
43                 //PC阻止滚动条
44                 document.documentElement.style.overflow = 'hidden';
45                 //手机端阻止滚动条
46                 /*document.ontouchstart=function(){
47                     return false;
48                 }*/
49                 
50                 var wWidth = document.documentElement.clientWidth;
51                 var wHeight = document.documentElement.clientHeight;
52                     //console.log(wWidth +"------"+ wHeight);
53                 
54                 var oMask = document.createElement("div");
55                     oMask.id = "mask";
56                     document.body.appendChild(oMask);
57                     
58                 var oCont = document.createElement("div");
59                     oCont.id = "maskCont";
60                     oCont.innerHTML = '<div id="closeMask"></div>' + htmlStr;
61                     oMask.appendChild(oCont);
62                     
63                 var sWidth = oCont.offsetWidth;
64                 var sHeight = oCont.offsetHeight;
65                     //console.log(sWidth +"--------"+ sHeight)
66                     
67                     oCont.style.left = (wWidth - sWidth) / 2 + "px";
68                     oCont.style.top = (wHeight - sHeight) / 2 + "px";
69                 
70                 var oClose = document.getElementById("closeMask");
71                     oClose.onclick = function(){
72                         document.body.removeChild(oMask);
73                         //PC阻止滚动条
74                         document.documentElement.style.overflow = 'auto';
75                         //手机端阻止滚动条
76                         /*document.ontouchstart=function(){
77                             return true;
78                         }*/
79                     }
80             }
81             
82             document.getElementById("showDiv").onclick = function(){
83                 htmlStr = '<div class="mask-tit">标题名称</div>'
84                         + '<div class="mask-cont">内容</div>'
85                         + '<div class="mask-but">按钮</div>';
86                 showOpen();
87             }
88             
89             document.getElementById("showDiv1").onclick = function(){
90                 htmlStr = '<div class="mask-cont">内容</div>'
91                         + '<div class="mask-but">按钮</div>';
92                 showOpen();
93             }
94         </script>
95     </body>
96 </html>

 

posted @ 2017-08-21 14:19  wǒの湁茡潞釦﹌  阅读(198)  评论(0)    收藏  举报