JS+CSS实现弹出全屏灰黑色透明遮罩效果的方法-前端开发

下面是JS+CSS实现弹出全屏灰黑色透明遮罩效果的方法的完整攻略。

下面是JS+CSS实现弹出全屏灰黑色透明遮罩效果的方法的完整攻略。

1. HTML结构

先看一下要实现的页面结构，包含了一个按钮和一个弹框：

<button id="showModal">打开弹框</button>

<div id="mask"></div>
<div id="modal">
  <h2>弹框标题</h2>
  <p>弹框内容</p>
  <button id="closeModal">关闭</button>
</div>

其中，#mask是遮罩层，#modal是弹框层。

2. CSS样式

接下来先设置好基础的样式：

#mask {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色 */
  z-index: 9999; /* 比后面的内容都要高 */
  display: none; /* 隐藏 */
}

#modal {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%); /* 居中 */
  z-index: 10000; /* 比遮罩层高 */
  background-color: #fff; /* 白色背景 */
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); /* 阴影 */
  display: none; /* 隐藏 */
}

这里设置了遮罩层和弹框层的基础样式，并将它们都设为隐藏状态。

3. JS代码

接下来是JS的部分。

首先，我们需要使用JS监听按钮点击事件，来触发弹框的弹出：

var showModalBtn = document.getElementById('showModal');
var closeModalBtn = document.getElementById('closeModal');

showModalBtn.addEventListener('click', function() {
  document.getElementById('mask').style.display = 'block';
  document.getElementById('modal').style.display = 'block';
});

这里使用了addEventListener来监听按钮的点击事件，一旦点击就将遮罩层和弹框层的display属性都设置为block，显示出来。

然后，我们需要使用JS监听遮罩层的点击事件和关闭按钮的点击事件，来触发弹框的关闭：

document.getElementById('mask').addEventListener('click', function() {
  hideModal();
});

closeModalBtn.addEventListener('click', function() {
  hideModal();
});

function hideModal() {
  document.getElementById('mask').style.display = 'none';
  document.getElementById('modal').style.display = 'none';
}

这里使用了addEventListener来监听遮罩层的点击事件和关闭按钮的点击事件，一旦点击就调用hideModal函数，将遮罩层和弹框层的display属性都设置为none，隐藏起来。

4. 总结

以上就是JS+CSS实现弹出全屏灰黑色透明遮罩效果的完整攻略。通过设置基础样式和使用JS监听事件，我们能够实现弹框层的弹出和关闭，从而达到全屏灰黑色透明遮罩的效果。

以下是两个示例说明：

示例一

在CodePen上创建一个新的Pen，将以下代码复制到HTML部分：

<button id="showModal">打开弹框</button>

<div id="mask"></div>
<div id="modal">
  <h2>弹框标题</h2>
  <p>弹框内容</p>
  <button id="closeModal">关闭</button>
</div>

将以下代码复制到CSS部分：

#mask {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色 */
  z-index: 9999; /* 比后面的内容都要高 */
  display: none; /* 隐藏 */
}

#modal {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%); /* 居中 */
  z-index: 10000; /* 比遮罩层高 */
  background-color: #fff; /* 白色背景 */
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); /* 阴影 */
  display: none; /* 隐藏 */
}

将以下代码复制到JS部分：

var showModalBtn = document.getElementById('showModal');
var closeModalBtn = document.getElementById('closeModal');

showModalBtn.addEventListener('click', function() {
  document.getElementById('mask').style.display = 'block';
  document.getElementById('modal').style.display = 'block';
});

document.getElementById('mask').addEventListener('click', function() {
  hideModal();
});

closeModalBtn.addEventListener('click', function() {
  hideModal();
});

function hideModal() {
  document.getElementById('mask').style.display = 'none';
  document.getElementById('modal').style.display = 'none';
}

这时点击运行就能看到一个按钮，点击后弹出一个带遮罩的弹框。

示例二

在一个普通的网页中，创建一个按钮和一个弹框，HTML部分如下：

<button id="showModal">打开弹框</button>

<div id="mask"></div>
<div id="modal">
  <h2>弹框标题</h2>
  <p>弹框内容</p>
  <button id="closeModal">关闭</button>
</div>

在<head>标签内添加以下样式表：

<style>
#mask {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色 */
  z-index: 9999; /* 比后面的内容都要高 */
  display: none; /* 隐藏 */
}

#modal {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%); /* 居中 */
  z-index: 10000; /* 比遮罩层高 */
  background-color: #fff; /* 白色背景 */
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); /* 阴影 */
  display: none; /* 隐藏 */
}
</style>

在<body>标签内添加以下JS代码：

<script>
var showModalBtn = document.getElementById('showModal');
var closeModalBtn = document.getElementById('closeModal');

showModalBtn.addEventListener('click', function() {
  document.getElementById('mask').style.display = 'block';
  document.getElementById('modal').style.display = 'block';
});

document.getElementById('mask').addEventListener('click', function() {
  hideModal();
});

closeModalBtn.addEventListener('click', function() {
  hideModal();
});

function hideModal() {
  document.getElementById('mask').style.display = 'none';
  document.getElementById('modal').style.display = 'none';
}
</script>

这时刷新页面就能看到一个按钮，点击后弹出一个带遮罩的弹框。

1. HTML结构

2. CSS样式

3. JS代码

4. 总结

示例一

示例二

基础教程推荐