正文

如何让jQuery点击事件只显示一次弹窗后自动消失？

/0 浏览量
1008

在jQuery中，为了让点击事件触发的弹窗只显示一次并自动消失，我们可以通过使用事件委托和标志变量来实现。以下是一种实现方法：

基本思路

  1. 使用一个标志变量来记录弹窗是否已经显示过。
  2. 使用事件委托来绑定点击事件，这样即使动态添加了新的元素，事件也能被正确触发。
  3. 在点击事件中，检查标志变量，如果弹窗尚未显示，则显示弹窗并更新标志变量；如果弹窗已显示，则不执行任何操作。

代码实现

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>jQuery点击事件只显示一次弹窗</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
  #popup {
    display: none;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    padding: 20px;
    background-color: #fff;
    border: 1px solid #ddd;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    z-index: 1000;
  }
</style>
</head>
<body>

<button id="openBtn">打开弹窗</button>

<div id="popup">
  <p>这是一个弹窗！</p>
</div>

<script>
$(document).ready(function() {
  var isPopupShown = false; // 标志变量，记录弹窗是否已显示

  $('#openBtn').on('click', function() {
    if (!isPopupShown) { // 如果弹窗尚未显示
      $('#popup').fadeIn(); // 显示弹窗
      isPopupShown = true; // 更新标志变量
    }
  });

  // 当点击弹窗外部时，自动关闭弹窗
  $(document).on('click', function(e) {
    if (!$(e.target).closest('#popup').length && isPopupShown) {
      $('#popup').fadeOut(); // 关闭弹窗
      isPopupShown = false; // 更新标志变量
    }
  });
});
</script>

</body>
</html>

代码说明

  • HTML部分包含一个按钮和一个弹窗元素。
  • CSS部分为弹窗添加了一些基本样式。
  • JavaScript部分：
    • 使用$(document).ready()确保DOM完全加载后再绑定事件。
    • 定义isPopupShown变量来记录弹窗是否已显示。
    • 为按钮绑定点击事件，当点击时检查isPopupShown，如果为false，则显示弹窗并更新变量。
    • 使用事件委托为整个文档绑定点击事件，当点击弹窗外部时关闭弹窗。

这样，弹窗就会在第一次点击后自动消失，且不会再显示。

-- 展开阅读全文 --