html js控制页面蒙版,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;

}

弹出蒙板

你好啊,我是内容~~

关闭

function showModel() {

document.getElementById('myModel').style.display = 'block';

}

function closeModel() {

document.getElementById('myModel').style.display = 'none';

}

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