<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <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="http://www.gzui.net/" ></iframe> </div> </div> <b class="d4 backcolor"></b><b class="d3 backcolor"></b><b class="d2 backcolor"></b><b class="d1"> </b> </div> </form> <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> </body> </html> 提示：你可以先修改部分代码再运行。 http://www.cnblogs.com/dengjd/p/3781105.html 转载请注明：有爱前端 » 全屏圆角弹出框 喜欢 (0)or分享 (0)
