最简单的弹出层效果

最新推荐文章于 2023-02-04 09:37:33 发布

相对静止

最新推荐文章于 2023-02-04 09:37:33 发布

阅读量611

点赞数

分类专栏： html

html 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一种使用HTML和CSS实现遮罩层与弹窗的方法。通过设置元素的绝对定位、层级叠放顺序及透明度等属性，可以在网页上创建一个可点击的遮罩层，并在此基础上弹出一个对话窗口。文中提供了具体的代码示例。

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

<div style="width:100%; text-align:center; text-align:center" onClick="d1.style.display='block';d2.style.display='block'">
点击此处显示效果
</div>
<div style="width:100%;height:100%;FILTER:alpha(opacity=50); background-color:#000000; position:absolute; top:0; left:0; z-index:100; display:none" id="d1"></div>
<div style="position:absolute; top:200px; left:200px; display:none; z-index:200" id="d2">
<div style="background:#fff; z-index:200; height:300px; width:300px">
效果是这样的吧,你自己再美化一下就OK了<br>
<span onClick="d1.style.display='none';d2.style.display='none'" style="color:blue">关闭</span>
</div>
</div>