html 极简遮罩层(自定义弹窗)

GlassyBug

于 2018-07-12 15:43:24 发布

阅读量7.2k

点赞数 2

分类专栏： jquery

本文链接：https://blog.youkuaiyun.com/a630895452/article/details/81017076

版权

jquery 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一种使用HTML和CSS实现弹窗与遮罩层的方法。通过设置div元素的样式属性，如z-index、position和display等，来创建顶层显示的弹窗及底层的遮罩效果。这种技术常用于网页中需要暂时覆盖原有内容并展示特定信息的场景。

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

<!-- 弹窗显示 即顶层显示 -->
<div id="popDiv"
        style="z-index: 99; display: block; position: absolute; margin-top: 20%; margin-left: 40%; background-color: #FFF;">
        弹窗页面
</div>

<!-- 底层遮罩层 即遮盖页面 -->
<div id="bg"
        style="display: block; background-color: #ccc; width: 100%; position: absolute; height: 100%; opacity: 0.5; z-index: 1;"></div>