JavaScript蒙板(model)功能的简单实现代码

思路:

•创建一个蒙板, 设置蒙板的堆叠顺序保证能将其它元素盖住

position: absolute;
top: 0;
left: 0;
display: none;
background-color: rgba(9, 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';
}

注意事项: 蒙板要采用绝对定位, 宽和高要占満整个页面, 堆叠顺序要大

源代码

.container {
width: 900px;
margin: 50px auto;
text-align: center;
}
#myModel {
position: absolute;
top: 0;
left: 0;
display: none;
background-color: rgba(9, 9, 9, 0.63);
width: 100%;
height: 100%;
z-index: 1000;
}
.model-content {
width: 50%;
text-align: center;
background: #ffffff;
border-radius: 6px;
margin: 100px auto;
line-height: 30px;
z-index: 10001;
}




弹出蒙板


你好啊,我是内容~~

关闭

以上所述是小编给大家介绍的Javascript蒙板(model)功能的简单实现代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对考高分网网站的支持！