js实现页面遮罩层

使用JavaScript创建和移除页面遮罩层

最新推荐文章于 2023-08-14 19:58:21 发布

原创最新推荐文章于 2023-08-14 19:58:21 发布 · 839 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#js #遮罩层

技术专栏收录该内容

3 篇文章

订阅专栏

本文介绍如何用JavaScript实现页面遮罩层功能，包括创建shelter函数来添加遮罩层，以及unshelter函数用于移除遮罩层，通过操作DOM元素实现页面动态效果。

//遮罩层

function shelter(){

           var sWidth,sHeight;
               sWidth = screen.availWidth - 20;//防止溢出
               if(screen.availHeight > document.body.scrollHeight){
                   sHeight = screen.availHeight; //少于一屏
               }else{
                   sHeight = document.body.scrollHeight; //多于一屏
               }
                   //创建遮罩背景
                   var maskObj = document.createElement("div");
                   maskObj.setAttribute('id','maskdiv');
                   maskObj.style.position = "absolute";
                   maskObj.style.top = "0";
                   maskObj.style.left = "0";
                   maskObj.style.background = "#fff";
                   maskObj.style.filter = "Alpha(opacity=40);";
                   maskObj.style.opacity = "0.4";
                   maskObj.style.width = sWidth + "px";
                   maskObj.style.height = sHeight + "px";
                   maskObj.style.zIndex = "10000";
                   document.body.appendChild(maskObj);

}

//解除遮罩层

function unshelter(){
document.body.removeChild(document.getElementById('maskdiv'));

}