類似如下的效果
image.png
當點擊上面的打開按鈕時虚婿，彈出彈框屋剑，這時只能操作彈框茵臭，其他的都無法操作震叮。
實現(xiàn)原理：
結(jié)構(gòu)上分為兩個部分：彈框和遮擋層胧砰；需要對兩者應(yīng)用position: absolute，然后使用z-index來設(shè)置層疊苇瓣，使得彈出彈框時只能操作彈框尉间，因此彈框的z-index需設(shè)置最大，其次是遮擋層的击罪，用于遮擋住其他元素哲嘲，當點擊在彈框外的位置時，其實點擊到的是遮擋層媳禁，因此遮擋層的width: 100%; height: 100%（注意：要使遮擋層的height:100%生效眠副，必須設(shè)置html和body的height: 100%）
html部分：
- 添加一個
<div class="fade"></div>表示遮擋層，該標簽是作為body的直接子元素 - 添加彈框的html標簽竣稽，假設(shè)是
<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的類娃弓，用于生成遮擋層的效果
