掌握交互秘诀：按钮点击显弹框，点外隐藏弹框的JS解决方案

2023-07-13 12:27:33

利用 JS 实现点击按钮显示弹框并隐藏弹框

在构建交互式网页时，弹框元素可以极大地增强用户体验。无论你是需要进行登录注册、展示商品详情还是收集用户反馈，弹框都可以让用户与你的网站进行更深入的互动。

点击按钮显示弹框

要创建点击按钮显示弹框的效果，你需要使用 JavaScript 的 addEventListener() 方法。这个方法可以为按钮添加一个点击事件监听器，当用户点击按钮时，会执行特定的代码。

在你的 JavaScript 代码中，首先获取按钮和弹框元素的引用：

const showModalButton = document.getElementById('show-modal-button');
const modal = document.getElementById('modal');

然后，为按钮添加一个点击事件监听器：

showModalButton.addEventListener('click', () => {
  // 显示弹框
  modal.classList.remove('hidden');
});

点击弹框或弹框以外区域隐藏弹框

同样，你可以使用 JavaScript 的 addEventListener() 方法来监听弹框或弹框以外区域的点击事件。

要监听弹框的点击事件，你需要将一个点击事件监听器添加到弹框元素：

modal.addEventListener('click', (event) => {
  // 如果点击了关闭按钮，则隐藏弹框
  if (event.target.id === 'close-modal-button') {
    modal.classList.add('hidden');
  }
});

要监听弹框以外区域的点击事件，你需要将一个点击事件监听器添加到 document 对象：

document.addEventListener('click', (event) => {
  // 如果点击了弹框以外的区域，则隐藏弹框
  if (!modal.contains(event.target)) {
    modal.classList.add('hidden');
  }
});

代码示例

以下是一个完整的代码示例，演示了如何实现点击按钮显示弹框，并点击按钮及弹框以外的区域时隐藏弹框的功能：

<button id="show-modal-button">显示弹框</button>

<div id="modal" class="hidden">
  <p>这是一个弹框</p>
  <button id="close-modal-button">关闭弹框</button>
</div>

<script>
  const showModalButton = document.getElementById('show-modal-button');
  const modal = document.getElementById('modal');

  showModalButton.addEventListener('click', () => {
    modal.classList.remove('hidden');
  });

  modal.addEventListener('click', (event) => {
    if (event.target.id === 'close-modal-button') {
      modal.classList.add('hidden');
    }
  });

  document.addEventListener('click', (event) => {
    if (!modal.contains(event.target)) {
      modal.classList.add('hidden');
    }
  });
</script>