思路:
•创建一个蒙板,设置蒙板的堆叠顺序保证能将其它元素盖住
rush:js;">
position: absolute;
top: 0;
left: 0;
display: none;
background-color: rgba(9,9,0.63);
width: 100%;
height: 100%;
z-index: 1000; •设置蒙板中内容的背景色和展示格式
width: 50%;
text-align: center;
background: #ffffff;
border-radius: 6px;
margin: 100px auto;
line-height: 30px;
z-index: 10001; •绑定事件,动态切换蒙板的 display 属性
function showModel() {
document.getElementById('myModel').style.display = 'block';
}
function closeModel() {
document.getElementById('myModel').style.display = 'none';
}
注意事项: 蒙板要采用绝对定位,宽和高要占満整个页面,堆叠顺序要大