全屏圆角弹出框
<head runat="server">
<title></title>
<style type="text/css">
.b1, .b2, .b3, .b4, .d1, .d2, .d3, .d4,.b
{
display: block;
overflow: hidden;
}
.b1, .b2, .b3, .d1, .d2, .d3
{
height: 1px;
}
.b2, .b3, .b4, .d2, .d3, .d4, .b
{
border-left: 1px solid #999;
border-right: 1px solid #999;
}
.b1, .d1
{
margin: 0 5px;
background: #999;
}
.b2, .d2
{
margin: 0 3px;
border-width: 2px;
}
.b3, .d3
{
margin: 0 2px;
}
.b4, .d4
{
height: 2px;
margin: 0 1px;
}
.backcolor
{
background: #9BD1FA;
}
.content
{
background-color:White;
border:solid 1px #999;
margin-left:8px;
margin-right:8px;
}
.title
{
height:25px;
}
.b
{
padding-bottom:5px;
}
</style>
</head>
<body style=" margin:5px;">
<form id="form1" runat="server">
<div>
<input type="button" value="Show" onclick="Show()"/>
</div>
<div id="WinDiv" style=" position:absolute; top:1px; left:1px; display:none;" >
<b class="b1"></b><b class="b2 backcolor"></b><b class="b3 backcolor"></b><b class="b4 backcolor"></b>
<div class="b backcolor">
<div class="title">
<span style=" float:left; margin:2px 0 0 10px;">全屏弹出框</span>
<span onclick="document.getElementById('WinDiv').style.display = 'none'" style=" float:right; margin:2px 10px 0 0; cursor:pointer;">关闭</span>
</div>
<div id="content" class="content">
<iframe id="WinFrame" frameborder="no" height="100%" width="100%" marginheight="0" marginwidth="0" scrolling="auto" src="WebForm1.aspx" ></iframe>
</div>
</div>
<b class="d4 backcolor"></b><b class="d3 backcolor"></b><b class="d2 backcolor"></b><b class="d1">
</b>
</div>
</form>
</body>
</html>
<script type="text/javascript">
function Show() {
document.getElementById("WinDiv").style.display = "block";
document.getElementById("WinDiv").style.height = (document.documentElement.clientHeight - 2) + "px";
document.getElementById("WinDiv").style.width = (document.documentElement.clientWidth - 2) + "px";
document.getElementById("content").style.height = (document.documentElement.clientHeight - 44) + "px";
document.getElementById("content").style.width = (document.documentElement.clientWidth - 22) + "px";
}
</script>
