点击弹出一个层
很多网站都有类似的通过点击会弹出一个层让用户操作
或者是个视频啊，或者是图片啊，什么的。
由于工作需要，美工又不会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>