使用html和css创建点击按钮弹出遮罩层效果
本文介绍如何使用HTML和CSS代码创建点击按钮后弹出遮罩层，遮盖页面底部元素的效果。
效果演示：
(此处应插入效果图)
实现步骤：
立即学习“前端免费学习笔记（深入）”；
我们将使用HTML结构和CSS样式来实现此效果。
HTML代码：
点击按钮弹出遮罩层 这是一个弹出窗口
代码解释：
-
#bg：定义遮罩层样式，使用rgba设置半透明黑色背景。position: fixed;确保遮罩层固定在页面上。 -
#show：定义弹出窗口样式，transform: translate(-50%, -50%);使窗口水平垂直居中。 -
showMask()：显示遮罩层和弹出窗口。 -
hideMask()：隐藏遮罩层和弹出窗口。 点击遮罩层本身会触发hideMask()函数。
这段代码创建了一个按钮，点击后会显示一个半透明的黑色遮罩层和一个白色的弹出窗口。点击遮罩层或关闭按钮（可以自行添加）可以隐藏它们。 记住替换/uploads/20250221/174013842367b867b7bebd2.jpg 为你实际图片的路径。
