纯JS手写带遮罩层的漂亮弹窗 – 网页特效库

带遮罩层的漂亮弹窗

Categories:网页特效

by 网页特效库 |

on 29 11 月, 2024

下面是一个不借助任何第三方库的简单但好看的弹窗示例。这个弹窗可以通过点击按钮触发，并且包含关闭功能。

代码说明：

HTML结构：

包含一个按钮用于打开弹窗和一个弹窗模态框。
弹窗模态框包含标题、消息内容和关闭按钮。

CSS样式：

设置了整体布局、颜色、间距等，使页面美观且易于阅读。
弹窗模态框使用固定定位，并通过visibility和opacity属性实现显示和隐藏动画。
按钮和关闭按钮设置了样式，使其更具吸引力。

JavaScript逻辑：

获取DOM元素并添加事件监听器。
点击“打开弹窗”按钮时显示弹窗。
点击关闭按钮或模态框外部区域时隐藏弹窗。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>自定义弹窗</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #f0f2f5;
      margin: 0;
      padding: 20px;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }
    .button-container {
      text-align: center;
    }
    .open-button {
      padding: 10px 20px;
      font-size: 16px;
      color: white;
      background-color: #007bff;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      transition: background-color 0.3s ease;
    }
    .open-button:hover {
      background-color: #0056b3;
    }
    .modal-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      display: flex;
      justify-content: center;
      align-items: center;
      visibility: hidden;
      opacity: 0;
      transition: visibility 0s linear 0.3s, opacity 0.3s ease-out;
      z-index: 1000;
    }
    .modal-overlay.visible {
      visibility: visible;
      opacity: 1;
      transition: opacity 0.3s ease-in;
    }
    .modal-content {
      background-color: white;
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
      width: 90%;
      max-width: 400px;
      text-align: center;
      transform: translateY(-20px);
      opacity: 0;
      transition: transform 0.3s ease, opacity 0.3s ease;
    }
    .modal-content.visible {
      transform: translateY(0);
      opacity: 1;
    }
    .close-button {
      position: absolute;
      top: 10px;
      right: 10px;
      padding: 5px 10px;
      font-size: 16px;
      color: #333;
      background-color: transparent;
      border: none;
      cursor: pointer;
      transition: color 0.3s ease;
    }
    .close-button:hover {
      color: #007bff;
    }
    .modal-title {
      font-size: 24px;
      margin-bottom: 10px;
    }
    .modal-message {
      font-size: 16px;
      color: #555;
      margin-bottom: 20px;
    }
  </style>
</head>
<body>
  <div class="button-container">
    <button class="open-button" id="open-modal">打开弹窗</button>
  </div>

  <div class="modal-overlay" id="modal-overlay">
    <div class="modal-content" id="modal-content">
      <button class="close-button" id="close-modal">&times;</button>
      <div class="modal-title">提示信息</div>
      <div class="modal-message">这是一个简单的弹窗。</div>
    </div>
  </div>

  <script>
    // 获取DOM元素
    const openButton = document.getElementById('open-modal');
    const closeButton = document.getElementById('close-modal');
    const modalOverlay = document.getElementById('modal-overlay');
    const modalContent = document.getElementById('modal-content');

    // 打开弹窗
    openButton.addEventListener('click', () => {
      modalOverlay.classList.add('visible');
      setTimeout(() => {
        modalContent.classList.add('visible');
      }, 10); // 确保overlay先显示出来
    });

    // 关闭弹窗
    closeButton.addEventListener('click', () => {
      modalContent.classList.remove('visible');
      setTimeout(() => {
        modalOverlay.classList.remove('visible');
      }, 300); // 动画持续时间为300ms
    });

    // 点击遮罩层关闭弹窗
    modalOverlay.addEventListener('click', (event) => {
      if (event.target === modalOverlay) {
        modalContent.classList.remove('visible');
        setTimeout(() => {
          modalOverlay.classList.remove('visible');
        }, 300); // 动画持续时间为300ms
      }
    });
  </script>
</body>
</html>

No Tag

No responses yet

发表回复取消回复