JavaScript动态添加全局遮罩层

最新推荐文章于 2025-10-26 14:21:08 发布

原创最新推荐文章于 2025-10-26 14:21:08 发布 · 2.1k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#js #遮罩 #动态添加

前端之路专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一种使用JavaScript动态创建全局遮罩层的方法。通过创建一个div元素并设置其样式属性，如宽度、高度、背景颜色、透明度、位置等，使其覆盖整个屏幕，达到遮罩效果。此方法简单易懂，适用于网页开发中需要临时禁用页面交互的场景。

使用js动态添加全局遮罩层

代码

function setMask(){//设置遮罩层
            var mask = document.createElement('div');
            mask.style.width = window.innerWidth + 'px';
            mask.style.height = window.innerHeight + 'px';
            mask.style.background = '#fff';
            mask.style.opacity = '.1';
            mask.style.position = 'fixed';
            mask.style.top = '0';
            mask.style.left = '0';
            mask.style.zIndex = 10086;
            document.body.appendChild(mask);
        }