js弹出的遮罩层，如何能遮住全屏？

2025-03-07 01:25:08

推荐回答（2个）

回答1：

工具：电脑；浏览器；ultraedit软件；

操作步骤如下：

1、打开UE编辑器，新建一个空白的html文件和css文件；

2、在html文件中输入以下html代码；

3、在css文件中输入以下css代码；

4、编辑完成之后，选择格式为UTF8-无 BOM模式，保存文件；

5、在浏览器中打开此html文件，可以看到最终想要实现的遮住全屏效果。

回答2：

遮罩层的CSS

#mask {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: rgba(0, 0, 0, .3);
    z-index: 99999;
}

在传统浏览器中，不支持rgba的写法。
可以用伪造一层遮罩层

// html

// CSS
#modal {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 99999;
}
#modal .mask {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: #000;
    opacity: .3;
}