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>