JS Pop - 弹窗

JS Pop是一种常见的Web开发技术，用于在网页上显示警告、提示、确认等弹出窗口。虽然现代的 Web UI 库（如 React 和 Vue）通常提供了自己的弹窗组件，但 JS Pop 仍然是在一些场景下使用的基础技术，尤其是在不使用 UI 库的情况下。

简单的弹窗

最基本的弹窗使用 JavaScript 的 alert()、confirm() 和 prompt() 函数。这些函数都是全局函数，无需引入任何库即可使用，但在实际开发中使用频率较低。

alert()

alert() 函数用于显示含有一段文本的对话框。它只有一个参数，即要显示的文本字符串。例如：

alert('Hello, world!');

效果：一个标题为“警告”、信息为“Hello, world!”的对话框弹出。用户点击“确认”按钮后，对话框关闭。

confirm()

confirm() 函数显示一个对话框，要求用户确认或取消某个动作。它有一个参数，即要显示的文本字符串。

if (confirm('你确定吗？')) {
  console.log('用户点击了确定按钮。');
} else {
  console.log('用户点击了取消按钮。');
}

效果：一个标题为“确认”、信息为“你确定吗？”的对话框弹出。如果用户点击“确定”按钮，console.log() 打印“用户点击了确定按钮。”；如果用户点击“取消”按钮，console.log() 打印“用户点击了取消按钮。”。

prompt()

prompt() 函数显示一个提示框，要求用户输入一段文本。它有两个参数：提示文本字符串和一个可选的默认值字符串。

let name = prompt('请输入你的名字：', '张三');
if (name) {
  console.log('你好，' + name + '！');
} else {
  console.log('你没有输入名字！');
}

效果：一个标题为“输入”、信息为“请输入你的名字：”的对话框弹出。如果用户输入了文本并点击“确定”按钮，console.log() 打印“你好，[输入的名字]！”；如果用户点击“取消”按钮或输入空字符串，console.log() 打印“你没有输入名字！”。

自定义弹窗

如果需要更复杂的弹窗，需要自己写 JavaScript 代码。下面是一种常见的自定义弹窗实现方法。

首先，需要定义一个 HTML 模板，如下所示：

<div id="popup">
  <div class="popup-background"></div>
  <div class="popup-window">
    <div class="popup-title"></div>
    <div class="popup-content"></div>
    <div class="popup-buttons">
      <button class="popup-button">取消</button>
      <button class="popup-button">确定</button>
    </div>
  </div>
</div>

上述模板定义了一个 ID 为 popup 的 DIV 元素，其中包含了一个半透明的背景、一个弹窗窗口和两个按钮。窗口中包含了一个标题元素和一个内容元素，可以根据需求来修改和添加其他元素。

然后，需要在 JavaScript 中动态生成和显示弹窗。定义一个函数 showPopup(title, content, buttons, callback)，接受四个参数：弹窗的标题、内容、按钮数组和回调函数。按钮数组是一个包含与弹窗相关的所有按钮的数组，每个按钮都是一个包含 text 和 callback 属性的对象。text 表示按钮上显示的文本，callback 表示用户点击该按钮时触发的回调函数。

function showPopup(title, content, buttons, callback) {
  let popup = document.getElementById('popup');
  let titleElement = popup.querySelector('.popup-title');
  let contentElement = popup.querySelector('.popup-content');
  let buttonElements = popup.querySelectorAll('.popup-button');
  let buttonContainer = popup.querySelector('.popup-buttons');

  titleElement.innerHTML = title;
  contentElement.innerHTML = content;

  while (buttonContainer.firstChild) {
    buttonContainer.removeChild(buttonContainer.firstChild);
  }

  buttons.forEach((button, index) => {
    let buttonElement = buttonElements[index];
    buttonElement.innerHTML = button.text;
    buttonElement.onclick = (event) => {
      event.preventDefault();
      popup.style.display = 'none';
      if (callback) {
        callback(button.text);
      }
    };
    buttonContainer.appendChild(buttonElement);
  });

  popup.style.display = 'block';
}

上述代码首先获取 popup 元素以及其中的各个子元素，然后根据传入的参数来修改标题、内容和按钮文本等。最后，将按钮元素添加到按钮容器中，并为每个按钮元素绑定点击事件，当用户点击某个按钮时，弹窗隐藏并触发回调函数。

最后，可以在需要弹窗的地方调用 showPopup() 函数即可：

showPopup(
  '提示',
  '您确定要删除这条记录吗？',
  [
    { text: '取消' },
    { text: '确定' },
  ],
  (result) => {
    if (result === '确定') {
      // 执行删除操作。
    }
  }
);

以上示例将显示一个弹窗，用户可以选择“取消”或“确定”按钮。如果用户点击“确定”按钮，将触发回调函数，执行相应的操作。

总结

JS Pop 是一种常见的 Web 开发技术，用于在网页上显示各种弹出窗口。在 JavaScript 中，可以使用 alert()、confirm() 和 prompt() 等全局函数来显示简单的弹窗，也可以自己写代码实现更复杂的弹窗。上述示例展示了一种基于 HTML 和 JavaScript 的自定义弹窗实现方法，可以根据需求来修改和扩展。