类似如下的效果
image.png
当点击上面的打开按钮时，弹出弹框，这时只能操作弹框，其他的都无法操作。
实现原理：
结构上分为两个部分：弹框和遮挡层；需要对两者应用position: absolute，然后使用z-index来设置层叠，使得弹出弹框时只能操作弹框，因此弹框的z-index需设置最大，其次是遮挡层的，用于遮挡住其他元素，当点击在弹框外的位置时，其实点击到的是遮挡层，因此遮挡层的width: 100%; height: 100%（注意：要使遮挡层的height:100%生效，必须设置html和body的height: 100%）
html部分：
- 添加一个
<div class="fade"></div>表示遮挡层，该标签是作为body的直接子元素 - 添加弹框的html标签，假设是
<div class="dialog"></div>，为了叙述方便，将该标签里面的元素省略掉
css部分：
html,
body {
height: 100%;
}
.fade-active{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 100;
opacity: .5;
background-color: #ccc;
}
.dialog {
position: absolute;
z-index: 500;
left: 50%;
top: 30%;
background: #eee;
width: 328px;
box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.5);
}
当点击打开按钮时，为class='fade'的div添加fade-active的类，用于生成遮挡层的效果
