最近纠结于遮罩层和弹出层的实现，终于搞定了个简单的版本。示例和代码如下，点击按钮可以看到效果：
1.示例:
2.代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>遮罩层和弹出层简单实现</title> <script type="text/javascript"> function show() { var div = document.createElement("div"); var div_show = document.getElementById("div_show"); div.style.width = Math.max(document.documentElement.scrollWidth, document.documentElement.clientWidth) + "px"; div.style.height = Math.max(document.documentElement.scrollHeight, document.documentElement.clientHeight) + "px"; div.style.backgroundColor = "#000000"; div.style.position = "absolute"; div.style.opacity = 0.5; div.style.left = 0; div.style.top = 0; div.id = "zhebiceng"; div.style.zIndex = 100; top.document.getElementById("div_body").appendChild(div); div_show.style.display = "block"; } function play_show() { var div = top.document.getElementById("zhebiceng"); var div_show = document.getElementById("div_show"); div_show.style.display = "none"; div.style.display = "none"; div.parentNode.removeChild(div); } </script> </head> <body> <div id="div_body"> <input type="button" value="click" onclick="show()" /> </div> <div id="div_show" style=" background:white;display: none;height: 400px;left: 80px; position: fixed;top: 88px; width: 80%;z-index: 99999;"> <input type="button" value="关闭" onclick="play_show();" style="float: right;" /> </div> </body> </html>
本文转自叶超Luka博客园博客，原文链接：http://www.cnblogs.com/yc-755909659/p/3165275.html，如需转载请自行联系原作者
