【Javascript Demo】遮罩层和弹出层简单实现

最近纠结于遮罩层和弹出层的实现，终于搞定了个简单的版本。示例和代码如下，点击按钮可以看到效果：

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>

 

 

posted @ 2013-07-01 17:42  叶超Luka  阅读(882)  评论(0)  编辑  收藏  举报