html js控制页面蒙版,js实现在页面上弹出蒙板技巧简单实用

蒙板是两个div，其中popWindow样式的div用于遮住整个页面，并半透明。maskLayer 在popWindow上面，用于显示蒙板的信息，比如“载入中……“

.popWindow {

background-color:#9D9D9D;

width: 100%;

height: 100%;

left: 0;

top: 0;

filter: alpha(opacity=50);

opacity: 0.5;

z-index: 1;

position: absolute;

}

.maskLayer {

background-color:#000;

width: 200px;

height: 30px;

line-height: 30px;

left: 50%;

top: 50%;

color:#fff;

z-index: 2;

position: absolute;

text-align:center;

}

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';

}

弹出蒙板

关闭蒙板