思路:
•创建一个蒙板, 设置蒙板的堆叠顺序保证能将其它元素盖住
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';}注意事项: 蒙板要采用绝对定位, 宽和高要占整个页面, 堆叠顺序要大
源代码
<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><title>蒙板</title><style>.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;}</style></head><body><div><button onclick="showModel()">弹出蒙板</button><div id="myModel" onclick="closeModel()"><div><p>你好啊,我是内容~~</p><p><button id="closeModel" onclick="closeModel()">关闭</button></p></div></div></div><script>function showModel() {document.getElementById('myModel').style.display = 'block';}function closeModel() {document.getElementById('myModel').style.display = 'none';}</script></body></html>以上所述是小编给大家介绍的JavaScript蒙板(model)功能的简单实现代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对武林网网站的支持！