全面剖析使用原生的JS写弹窗

前端

2023-10-14 06:41:18

原生的JS写弹窗的基本原理

弹窗，又称模态框或对话框，是一种前端开发中常用的交互元素。它可以用来显示重要信息、收集用户输入或提供其他交互功能。一个基本的弹窗通常包含以下几个元素：

按钮：用于触发弹窗的元素。
关闭键：用于关闭弹窗的元素。
遮罩区：覆盖在页面上的半透明层，用于突出显示弹窗。
弹窗内容区：包含弹窗主要内容的区域。

弹窗的基本原理很简单：当用户点击按钮时，弹窗及其遮罩区会同时出现。当用户点击关闭键或遮罩区时，弹窗及其遮罩区会同时消失。

使用原生的JS创建弹窗的步骤

接下来，我们将逐步介绍如何使用原生的JS创建弹窗。

1. 创建按钮

按钮是触发弹窗的元素。它可以是任何HTML元素，如<button>、<a>或<div>。按钮的样式和内容可以根据需要进行定制。

2. 创建关闭键

关闭键用于关闭弹窗。它可以是任何HTML元素，如<button>、<a>或<div>。关闭键的样式和内容可以根据需要进行定制。

3. 创建遮罩区

遮罩区是覆盖在页面上的半透明层，用于突出显示弹窗。它可以是一个<div>元素，并设置position: fixed;、top: 0;、left: 0;、right: 0;、bottom: 0;和background-color: rgba(0, 0, 0, 0.5);等样式。

4. 创建弹窗内容区

弹窗内容区包含弹窗的主要内容。它可以是一个<div>元素，并设置position: fixed;、top: 50%;、left: 50%;、transform: translate(-50%, -50%);、padding: 20px;和background-color: white;等样式。

5. 将元素组合成弹窗

现在，我们可以将上述元素组合成一个完整的弹窗。

const button = document.getElementById('button');
const closeButton = document.getElementById('closeButton');
const modal = document.getElementById('modal');
const modalContent = document.getElementById('modalContent');

button.addEventListener('click', () => {
  modal.style.display = 'block';
});

closeButton.addEventListener('click', () => {
  modal.style.display = 'none';
});

window.addEventListener('click', (event) => {
  if (event.target === modal) {
    modal.style.display = 'none';
  }
});

这段代码首先获取了按钮、关闭键、弹窗及其内容区的元素。然后，它为按钮添加了一个事件监听器，当按钮被点击时，它会使弹窗及其遮罩区可见。它还为关闭键添加了一个事件监听器，当关闭键被点击时，它会使弹窗及其遮罩区不可见。最后，它为窗口添加了一个事件监听器，当窗口被点击时，如果点击的目标是弹窗，它会使弹窗及其遮罩区不可见。