[轉]建立一個JavaScript彈出DIV視窗層的效果
阿新 • • 發佈：2018-12-19
轉自：https://www.cnblogs.com/freeliver54/p/4920388.html
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 #popupcontent{ 8 position: absolute; 9 visibility: hidden; 10 overflow: hidden;11 border:1px solid #CCC; 12 background-color:#F9F9F9; 13 border:1px solid #333; 14 padding:5px; 15 } 16 </style> 17 <script> 18 var baseText = null; 19 20 function showPopup(w,h){ 21 var popUp = document.getElementById("popupcontent"); 22 popUp.style.top = "150px"; 23 popUp.style.left = "150px";24 popUp.style.width = w + "px"; 25 popUp.style.height = h + "px"; 26 //if (baseText == null) baseText = popUp.innerHTML; 27 //popUp.innerHTML = baseText + "<div id=\"statusbar\"><button onclick=\"hidePopup();\">Close window</button></div>"; 28 //var sbar = document.getElementById("statusbar");29 //sbar.style.marginTop = (parseInt(h)-40) + "px"; 30 popUp.style.visibility = "visible"; 31 } 32 33 function hidePopup(){ 34 var popUp = document.getElementById("popupcontent"); 35 popUp.style.visibility = "hidden"; 36 } 37 38 39 </script> 40 </head> 41 <body> 42 <a href="#" onclick="showPopup(600,600);" >Open popup</a> 43 <div id="popupcontent">這是一個DIV彈窗效果!相關內容如下 44 <iframe src="Agree.html" width="500px" height="500px;" scroll="auto"></iframe> 45 <div id="statusbar"><button onclick="hidePopup();">Close window</button></div> 46 </div> 47 48 </body> 49 </html>