使用 HTML、CSS 和 JavaScript 构建模态窗口（弹出窗口）

在本文中，我将向您展示如何创建一个点击按钮时弹出的模态框。本文的重点不在于 CSS，而是实现此功能所需的内容，因此请随意复制 CSS 样式。

要实现模态功能，您需要三个主要元素：

触发模式的按钮
模态框本身（很明显😅）
关闭模式的按钮

让我们继续在 HTML 中创建它们

  <body>
      <!-- button to launch the modal -->
      <button class="show-modal">Log In</button>

      <!-- the modal itself -->
      <div class="modal hidden">
         <!-- button to close the modal -->
         <button class="close-modal">&times;</button>

         <h1>Welcome back, friend😍</h1>
         <form action="">
            <input type="email" placeholder="Email">
            <input type="password" placeholder="Password">
            <button type="submit">Log in</button>
            <p>Don't have an account? <a href="">Sign up</a></p>
         </form>
      </div>
      <div class="overlay hidden"></div>
 </body>

我们将使用“hidden”类将模态框的初始显示设置为“无”。
让我们添加 CSS 并为触发模态框的按钮添加样式。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: sans-serif;
  color: #333;
  height: 100vh;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.show-modal {
  font-size: 2rem;
  font-weight: 600;
  padding: 1.2rem 2.5rem;
  margin: 5rem 2rem;
  border: none;
  background-color: rgb(92, 22, 139);
  color: rgb(241, 241, 241);
  border-radius: 0.5rem;
  cursor: pointer;
}

现在让我们添加模态框和覆盖层的样式

.modal {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  max-width: 500px;
  background-color: white;
  padding: 4rem;
  border-radius: 5px;
  box-shadow: 0 3rem 5rem rgba(0, 0, 0, 0.3);
  z-index: 10;
  text-align: center;
}

.modal h1 {
  font-size: 1.8rem;
  margin-bottom: 2rem;
}

p {
  font-size: 1.1rem;
}
a {
  text-decoration: none;
  color: rgb(2, 0, 145);
}

form input,
form button {
  display: block;
  width: 100%;
  margin: 1.3rem 0;
  border-radius: 5px;
  border: none;
  outline: none;
  padding: 1rem;
  font-size: 1.1rem;
}

form input {
  box-shadow: inset 2px 2px 5px #babecc, inset -5px -5px 10px 
  #ffffff73;
}

form button {
  background-color: rgb(2, 0, 145);
  color: #fff;
}
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(3px);
  z-index: 5;
}

.close-modal {
  position: absolute;
  top: 0.8rem;
  right: 1.3rem;
  font-size: 2.5rem;
  color: #333;
  cursor: pointer;
  border: none;
  background: none;
}

/* CLASS TO HIDE MODAL */
.hidden {
  display: none;
}

这就是我们的 HTML 和 CSS 的全部内容。
正如我之前提到的，我们需要在 JavaScript 中做的第一件事就是选择我们需要的元素。

const modal = document.querySelector(".modal"); //selects the modal
const btnCloseModal = document.querySelector(".close-modal"); //selects the button to close the modal
const btnOpenModal = document.querySelector(".show-modal"); //selects the button to show the modal
const overlay = document.querySelector(".overlay"); //selects the overlay

接下来，我们创建一个函数，添加或删除用于隐藏模态框和覆盖层的“hidden”类。

const toggleModal = function () {
  modal.classList.toggle("hidden");
  overlay.classList.toggle("hidden");
};

classList.toggle()方法采用 CSS 类名，如果该类不存在，则将其添加到指定元素；如果该类存在，则从元素中删除该类。

接下来，我们希望运行 toggleModal 函数。它会在点击 show-modal 按钮时移除hidden类，并在点击 close-modal 按钮以及用户点击模态框外部（覆盖层）时添加 hidden 类。我们可以通过在所选元素上使用addEventListener()方法来实现这一点。

btnOpenModal.addEventListener("click", toggleModal);

btnCloseModal.addEventListener("click", toggleModal);

overlay.addEventListener("click", toggleModal);

就这样！我们现在有一个功能齐全的登录模式。

你可以通过 codepen 进行实时测试https://codepen.io/veed_/pen/QWgLvYb。希望对你有帮助。

文章来源：https://dev.to/veedjohnson/build-a-modal-pop-up-with-html-css-and-javascript-4md3