CSS实现带遮罩层可关闭的弹窗效果

  

下面是针对“CSS实现带遮罩层可关闭的弹窗效果”的完整攻略：

1. HTML 结构

弹窗需要在 HTML 中先定义结构，可以使用一个 div 元素包裹弹窗内容。如下：

<div id="popup">
  <h2>这是弹窗标题</h2>
  <p>这是弹窗内容</p>
  <button id="closeBtn">关闭</button>
</div>

2. CSS 样式

定义弹窗的 CSS 样式，包括弹窗的位置布局、大小、样式等。可以通过绝对定位 position: absolute 让弹窗始终位于屏幕中央，如下：

#popup {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  height: 200px;
  background-color: #fff;
  z-index: 999;
}

其中，z-index 属性的值最好设为一个比较大的值，这样弹窗不会被其他元素挡住。

接下来，需要定义一个遮罩层，可以使用一个 div 元素充满整个屏幕，并给其设置一个半透明的颜色，如下：

#popup-mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 998;
}

其中，position: fixed 让遮罩层始终充满整个屏幕，并且相对于视口固定，不会随着滚动而变化。

3. JavaScript 交互

最后，我们需要实现弹窗的交互效果。可以通过以下几步来完成：

  1. 绑定一个点击事件，当触发这个事件时弹出弹窗。

  2. 显示遮罩层和弹窗，在显示时，为遮罩层添加一个摸黑淡入的效果，可以通过 transition 进行实现。

  3. 绑定关闭按钮的点击事件和遮罩层的点击事件，当触发这些事件时，隐藏弹窗和遮罩层，在隐藏时，为遮罩层添加一个摸黑淡出的效果，同样可以通过 transition 进行实现。

下面是示例代码：

// 获取相关 DOM 元素
var popup = document.getElementById('popup');
var popupMask = document.getElementById('popup-mask');
var closeBtn = document.getElementById('closeBtn');

// 绑定显示弹窗事件
document.getElementById('showPopup').addEventListener('click', function() {
  popup.classList.add('is-active');
  popupMask.classList.add('is-active');
});

// 绑定关闭弹窗事件
closeBtn.addEventListener('click', onClose);
popupMask.addEventListener('click', onClose);

function onClose() {
  popup.classList.remove('is-active');
  popupMask.classList.remove('is-active');
}

同时，需要在 CSS 中添加 transition 属性，来让显示和隐藏遮罩层时有一个动态的效果。如下所示：

#popup-mask {
  /* ... */
  opacity: 0;
  transition: opacity 0.3s ease;
}

#popup-mask.is-active {
  opacity: 1;
}

#popup {
  /* ... */
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
  transform: translate(-50%, -60%);
}

#popup.is-active {
  opacity: 1;
  transform: translate(-50%, -50%);
}

这样，就能够实现一个带遮罩层可关闭的弹窗效果了。

再举两个完整的示例：

示例一

HTML：

<button id="showPopup">点击显示弹窗</button>

<div id="popup-mask"></div>
<div id="popup">
  <h3>这是一个弹窗</h3>
  <p>这是弹窗的内容</p>
  <button id="closeBtn">关闭</button>
</div>

CSS：

#popup {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  height: 200px;
  background-color: #fff;
  z-index: 999;
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
  transform: translate(-50%, -60%);
}

#popup.is-active {
  opacity: 1;
  transform: translate(-50%, -50%);
}

#popup-mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 998;
  opacity: 0;
  transition: opacity 0.3s ease;
}

#popup-mask.is-active {
  opacity: 1;
}

JavaScript：

var popup = document.getElementById('popup');
var popupMask = document.getElementById('popup-mask');
var closeBtn = document.getElementById('closeBtn');

document.getElementById('showPopup').addEventListener('click', function() {
  popup.classList.add('is-active');
  popupMask.classList.add('is-active');
});

closeBtn.addEventListener('click', onClosePopup);
popupMask.addEventListener('click', onClosePopup);

function onClosePopup() {
  popup.classList.remove('is-active');
  popupMask.classList.remove('is-active');
}

示例二

HTML：

<button id="showPopup">点击显示弹窗</button>

<div id="popup-mask"></div>
<div id="popup">
  <h3>这是一个弹窗</h3>
  <p>这是弹窗的内容</p>
  <button id="closeBtn">关闭</button>
</div>

CSS：

#popup {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  height: 200px;
  background-color: #fff;
  z-index: 999;
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
  transform: translate(-50%, -60%);
  border-radius: 5px;
  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.3);
}

#popup.is-active {
  opacity: 1;
  transform: translate(-50%, -50%);
}

#popup-mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 998;
  opacity: 0;
  transition: opacity 0.3s ease;
}

#popup-mask.is-active {
  opacity: 1;
}

JavaScript：

var popup = document.getElementById('popup');
var popupMask = document.getElementById('popup-mask');
var closeBtn = document.getElementById('closeBtn');

document.getElementById('showPopup').addEventListener('click', function() {
  popup.classList.add('is-active');
  popupMask.classList.add('is-active');
});

closeBtn.addEventListener('click', onClosePopup);
popupMask.addEventListener('click', onClosePopup);

function onClosePopup() {
  popup.classList.remove('is-active');
  popupMask.classList.remove('is-active');
}

在第二个示例中，我添加了圆角和阴影，使得弹窗看起来更加美观。

相关文章
前端开发最新文章
热门教程