一、功能实现
//CSS部分
<style type="text/css">
.popWindow {
width: 100%;
height: 100%;
left: 0;
top: 0;
z-index: 1;
position: absolute;
}
.maskLayer {
width: 0.5rem;
height: 0.5rem;
left: 3%;
top: 2%;
color:#fff;
z-index: 2;
position: absolute;
}
.cavans {
height: 100%;
width: 100%;
}
</style>
//HTML部分
<div id="popWindow" class="popWindow" style="display: none;">
</div>
<div id="maskLayer" class="maskLayer" style="display: none;" onclick="this.closeDiv()"></div>
//JS部分
function showDiv() {
document.getElementById('popWindow').style.display = 'block';
document.getElementById('maskLayer').style.display = 'block';
}
function closeDiv() {
document.getElementById('popWindow').style.display = 'none';
document.getElementById('maskLayer').style.display = 'none';
}
二、解决添加蒙层后页面滚动问题
1.功能实现后，我们发现由于页面过长导致其能够滚动，这会引起蒙层下方的正常页面也显示出来了。
我们将body设为overflow:hidden即可解决该问题。
document.getElementsByTagName("body")[0].setAttribute("style","overflow:hidden")
2.我们发现这样设置在移动端不起作用，所以我们为蒙层添加一个监听事件(addEventListener)，该事件通过preventDefault()来禁用touchmove，即禁用了页面滚动这一事件，这样我们在移动端拖动的蒙层时候就不会引起页面滚动了。由于该事件仅作用于蒙层上，当我们关闭蒙层的时候，页面又能正常滚动了。
document.getElementById('popWindow').addEventListener('touchmove',function (event) {
event.preventDefault();
} ,false);
