如何用HTML和CSS实现点击按钮弹出遮罩层效果？-html教程-PHP中文网

如何用HTML和CSS实现点击按钮弹出遮罩层效果？

心靈之曲

发布： 2025-02-22 10:36:16

原创

591人浏览过

使用html和css创建点击按钮弹出遮罩层效果

本文介绍如何使用HTML和CSS代码创建点击按钮后弹出遮罩层，遮盖页面底部元素的效果。

如何用HTML和CSS实现点击按钮弹出遮罩层效果？

效果演示：

(此处应插入效果图)

实现步骤：

立即学习“前端免费学习笔记（深入）”；

火龙果写作

用火龙果，轻松写作，通过校对、改写、扩展等功能实现高质量内容生产。

106

查看详情

我们将使用HTML结构和CSS样式来实现此效果。

HTML代码：

<code class="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></code>

登录后复制

代码解释：