点击弹出一个层

很多网站都有类似的通过点击会弹出一个层让用户操作

或者是个视频啊，或者是图片啊，什么的。

由于工作需要，美工又不会js，就算会也只是用工具生成

所以今天只能自己写，看上去其实很简单，就是几句js+div来实现的。

当然具体的还得看需要什么操作，来让弹出的层实现什么样的功能。

 

弹出一个层，让网页的其他部分不能操作。实际上有两个层。

我们可以在html的body部分定义两个层。<div id="top" class="topdiv">和<div id="below"  class="belowdiv">；

可分别定义他们的样式，其中top这个层是弹出的层，而below这个层用于遮盖整个页面阻止用户操作页面的其他部分。

 

首先定义一下style，当然你可以依据自己的需要进行设置

 

 <style>
        .belowdiv{
            display: none;
            position: absolute;
            top: 0%;
            left: 0%;
            width: 100%;
            height: 100%;
            background-color: gray;
            z-index:1001;
            }
        .topdiv {
            display: none;
            position: absolute;
            top: 25%;
            left: 25%;
            width: 50%;
            height: 50%;
            padding: 16px;
            border-top:solid,16px,red;
            border-left:1px;
            border-right:1px;
            border-bottom:1px;
            background-color: white;
            z-index:1002;
            overflow: auto;
        }
    </style>

 

接着定义两个层,并触发层发生事件

<script type="text/javascript">

      function showOrHide(flag) {

 

            //这里说一下display的一些值：

            //“block”将元素显示为块级元素。

            //“”在页面上显示该层

            //“none”在页面上隐藏层，也把层占有的位置一起隐藏。

            //“hidden”在页面上隐藏层，但是保留占有的位置。

            if(flag == 1) {

                   document.getElementById("top").style.display = "block";

                   document.getElementById("below").style.display = "block";

           }

           if(flag == 2) {

                 

                   document.getElementById("top").style.display = "none";

                  document.getElementById("below").style.display = "none";

          }

     }

</script>

 

 

<a href="javascript:void(0)" onclick="showOrHide(1)">点击这里弹出div(当然也可以换成别的，例如图片什么的)</a>
<div id="top" class="topdiv">这是弹出的窗口 

<a href = "javascript:void(0)" onclick = "showOrHide(2)">关闭（也可以是小图片）</a>

</div>
<div id="below" class="belowdiv"></div>