html中弹出弹窗，点击div空白处，关闭弹窗，用jQuery写

在HTML中，通常我们会使用`<div>`元素作为遮罩层，并配合JavaScript库jQuery来实现点击外部区域关闭弹窗的功能。下面是一个简单的示例：

首先，创建一个弹窗容器（例如一个模态框`<div id="myModal">...</div>`），然后添加一个点击外部区域关闭弹窗的事件处理：

<!-- HTML部分 -->
<div id="myModal" class="modal">
  <div class="modal-content">
    <p>这是一个弹窗内容</p>
    <button type="button" class="close-button">&times;</button>
  </div>
</div>

<!-- 遮罩层和关闭按钮 -->
<div id="mask" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); display: none;"></div>
<button onclick="showModal()">显示弹窗</button>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

接下来，在jQuery中编写JavaScript代码：

// jQuery部分
function showModal() {
  // 显示弹窗和遮罩层
  $("#myModal").show();
  $("#mask").fadeIn();

  // 添加点击遮罩层和文档外关闭事件
  $("#mask").on("click", function(e) {
    if (!e.target.matches('#myModal')) {
      closeModal();
    }
  });

  $(document).on("mouseup", function (e) {
    if ($("#myModal").is(":visible") && !$("#myModal").has(e.target).length) {
      closeModal();
    }
  });
}

function closeModal() {
  // 隐藏弹窗和遮罩层
  $("#myModal").hide();
  $("#mask").fadeOut(300, function() {
    $(this).remove(); // 如果不需要遮罩层，可以移除这个回调
  });
}

在这个例子中，当用户点击“显示弹窗”按钮时，会打开弹窗并显示遮罩层。点击遮罩层或者页面其他地方（除了弹窗本身）都会触发`closeModal()`函数关闭弹窗。