jquery 点击弹窗其他地方关闭弹窗

原创

mob649e8158ed1f 2024-04-09 06:05:06 ©著作权

文章标签 ci jQuery User 文章分类 jQuery 前端开发

©著作权归作者所有：来自51CTO博客作者mob649e8158ed1f的原创作品，请联系作者获取转载授权，否则将追究法律责任

jQuery点击弹窗其他地方关闭弹窗

在网页开发中，经常会遇到需要弹出一个提示框或者弹窗的需求。当用户点击页面其他地方时，希望能够关闭这个弹窗，以提升用户体验。本文将介绍如何使用jQuery实现点击弹窗外部区域关闭弹窗的功能。

基本思路

实现点击弹窗外部区域关闭弹窗的基本思路是，给整个页面绑定一个点击事件，当用户点击页面其他地方时，判断点击的区域是否在弹窗范围内，如果不在弹窗范围内，则关闭弹窗。

示例代码

假设我们有一个简单的HTML结构，包含一个按钮用于弹出弹窗，以及一个弹窗：

<button id="openModalBtn">Open Modal</button>
<div id="modal" style="display: none;">
  <p>This is a modal window</p>
</div>

接下来，我们使用jQuery实现点击弹窗外部区域关闭弹窗的功能：

$(document).ready(function() {
  // 点击打开弹窗按钮
  $("#openModalBtn").click(function() {
    $("#modal").fadeIn();
    // 阻止事件冒泡
    return false;
  });

  // 点击页面其他地方关闭弹窗
  $(document).click(function(event) {
    if (!$(event.target).closest("#modal").length) {
      $("#modal").fadeOut();
    }
  });

  // 阻止弹窗关闭事件冒泡
  $("#modal").click(function(event) {
    event.stopPropagation();
  });
});

在上面的代码中，我们首先给打开弹窗按钮绑定了一个点击事件，当用户点击按钮时，弹窗会淡入显示。然后给整个页面绑定了一个点击事件，当用户点击页面其他地方时，判断点击的区域是否在弹窗内，如果不在弹窗内，则弹窗会淡出隐藏。同时，我们还阻止了弹窗关闭事件的冒泡，以避免误关闭弹窗。

序列图

下面是一个序列图，展示了用户点击页面其他地方关闭弹窗的过程：

sequenceDiagram
    participant User
    participant Button
    participant Document
    participant Modal

    User->>Button: 点击打开弹窗按钮
    Button->>Modal: 显示弹窗
    User->>Document: 点击页面其他地方
    Document->>Modal: 判断点击区域
    Modal->>Document: 关闭弹窗

通过序列图，可以清晰地看到用户点击页面其他地方关闭弹窗的交互流程。