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>
