页面遮罩效果

最新推荐文章于 2024-11-18 04:38:27 发布

xiaoqiu_net

最新推荐文章于 2024-11-18 04:38:27 发布

阅读量1.7k

点赞数

CC 4.0 BY-SA版权

分类专栏： jQuery Web JavaScript

本文链接：https://blog.youkuaiyun.com/q646926099/article/details/53158543

JavaScript 同时被 3 个专栏收录

28 篇文章

订阅专栏

Web

19 篇文章

订阅专栏

jQuery

15 篇文章

订阅专栏

本文介绍如何使用CSS和JavaScript实现页面的遮罩效果，通过设置遮罩层的z-index高于页面其他元素来阻止用户点击，同时确保对话框可以交互。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果：

遮罩效果，就是把页面给遮挡了，让用户无法再点击页面的元素。

原理就是弄一个遮罩层，在所有元素的最上方，让这个元素铺满屏幕，所以点击实际是点击的这个元素。

利用绝对定位，使元素脱离文档流，z-index属性设置其浮动层的位置，要做这个一个对话框，假设遮罩的z-index是100,那么这个对话框div块的z-index就是101，在它上方了.

css样式：

.mask {
    position: absolute;
    left: 0;
    top: 0;
    background-color: white;
    z-index: 100;
    opacity: 0.8;
    filter: alpha(opacity=80);
}

js调整遮罩大小为页面文档的大小：

$("<div/>").addClass("mask").css({ "height": $(document).height(), "width": $(document).width() });

创建遮罩元素后隐藏，在调用对话框需要遮罩的时候，显示遮罩层.