[转]创建一个JavaScript弹出DIV窗口层的效果

本文转自:http://www.soso.io/article/23698.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
#popupcontent{ 
position: absolute; 
visibility: hidden; 
overflow: hidden; 
border:1px solid #CCC; 
background-color:#F9F9F9; 
border:1px solid #333; 
padding:5px; 
} 
    </style>
    <script>
var baseText = null; 

function showPopup(w,h){ 
var popUp = document.getElementById("popupcontent"); 
popUp.style.top = "150px"; 
popUp.style.left = "150px"; 
popUp.style.width = w + "px"; 
popUp.style.height = h + "px"; 
//if (baseText == null) baseText = popUp.innerHTML; 
//popUp.innerHTML = baseText + "<div id="statusbar"><button onclick="hidePopup();">Close window</button></div>"; 
//var sbar = document.getElementById("statusbar"); 
//sbar.style.marginTop = (parseInt(h)-40) + "px"; 
popUp.style.visibility = "visible"; 
} 

function hidePopup(){ 
var popUp = document.getElementById("popupcontent"); 
popUp.style.visibility = "hidden"; 
} 


    </script>
</head>
<body>
    <a href="#" onclick="showPopup(600,600);" >Open popup</a> 
    <div id="popupcontent">这是一个DIV弹窗效果!相关内容如下
    <iframe src="Agree.html" width="500px" height="500px;" scroll="auto"></iframe>
    <div id="statusbar"><button onclick="hidePopup();">Close window</button></div>
    </div>
    
</body>
</html>
原文地址:https://www.cnblogs.com/freeliver54/p/4920388.html