关于 js 实现一个简单的蒙板功能(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';}

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

源代码

    
            
    
    
     弹出蒙板    
     
        
      
            
       
你好啊,我是内容~~
            
       
                关闭