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

  1. 云栖社区>
  2. 博客>
  3. 正文

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

嗯哼9925 2017-11-14 20:30:00 浏览589
展开阅读全文

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

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,如需转载请自行联系原作者

网友评论

登录后评论
0/500
评论
嗯哼9925
+ 关注