使用html和css创建点击按钮弹出遮罩层效果
本文介绍如何使用HTML和CSS代码创建点击按钮后弹出遮罩层，遮盖页面底部元素的效果。
效果演示：
(此处应插入效果图)
实现步骤：
立即学习“前端免费学习笔记（深入）”；
我们将使用HTML结构和CSS样式来实现此效果。
HTML代码：
<!DOCTYPE html>
<html>
<head>
<title>点击按钮弹出遮罩层</title>
<style>
#bg {
display: none; /* 默认隐藏遮罩层 */
position: fixed; /* 固定定位 */
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7); /* 黑色半透明背景 */
z-index: 1001; /* 确保遮罩层在其他元素之上 */
}
/* 可选：添加弹出窗口样式 */
#show {
display: none; /* 默认隐藏弹出窗口 */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /* 居中显示 */
z-index: 1002;
width: 300px;
height: 200px;
background-color: white;
border: 1px solid #ccc;
padding: 20px;
}
</style>
</head>
<body>
<button onclick="showMask()">点击显示遮罩层</button>
<div id="bg" onclick="hideMask()"></div>
<div id="show">这是一个弹出窗口</div>
<script>
function showMask() {
document.getElementById("bg").style.display = "block";
document.getElementById("show").style.display = "block";
}
function hideMask() {
document.getElementById("bg").style.display = "none";
document.getElementById("show").style.display = "none";
}
</script>
</body>
</html>
代码解释：
-
#bg：定义遮罩层样式，使用rgba设置半透明黑色背景。position: fixed;确保遮罩层固定在页面上。 -
#show：定义弹出窗口样式，transform: translate(-50%, -50%);使窗口水平垂直居中。 -
showMask()：显示遮罩层和弹出窗口。 -
hideMask()：隐藏遮罩层和弹出窗口。 点击遮罩层本身会触发hideMask()函数。
这段代码创建了一个按钮，点击后会显示一个半透明的黑色遮罩层和一个白色的弹出窗口。点击遮罩层或关闭按钮（可以自行添加）可以隐藏它们。 记住替换/uploads/20250221/174013842367b867b7bebd2.jpg 为你实际图片的路径。
