JQuery多按钮弹窗重叠与外部点击关闭问题求助

问题场景 #

我在学习jQuery实现多按钮弹窗功能时遇到以下问题：

• 页面有.mail_box和.tell_box两个触发按钮，点击分别显示.modal_1和.modal_2弹窗，同时添加背景遮罩样式
• 现有实现中会出现两个弹窗重叠显示的情况，且使用stopPropagation()无法解决点击弹窗外部时关闭所有弹窗的需求

需求明确：

1. 禁止两个弹窗同时显示，避免重叠
2. 点击弹窗外部区域时，移除所有弹窗及遮罩的切换类，恢复初始状态

完整实现代码 #

HTML结构 #

<!-- 触发按钮 -->
<button class="mail_box">显示邮件弹窗</button>
<button class="tell_box">显示电话弹窗</button>

<!-- 弹窗容器 -->
<div class="modal modal_1">
  <div class="modal-content">
    <button class="close-btn">×</button>
    <p>这是邮件弹窗内容</p>
  </div>
</div>
<div class="modal modal_2">
  <div class="modal-content">
    <button class="close-btn">×</button>
    <p>这是电话弹窗内容</p>
  </div>
</div>

<!-- 背景遮罩 -->
<div class="overlay"></div>

CSS样式 #

/* 基础样式重置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 触发按钮样式 */
.mail_box, .tell_box {
  padding: 8px 16px;
  margin: 20px;
  cursor: pointer;
}

/* 弹窗基础样式 */
.modal {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1001;
}

.modal-content {
  background: #fff;
  padding: 20px;
  border-radius: 4px;
  position: relative;
  width: 300px;
}

.close-btn {
  position: absolute;
  top: 10px;
  right: 15px;
  border: none;
  background: transparent;
  font-size: 24px;
  cursor: pointer;
}

/* 遮罩样式 */
.overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  z-index: 1000;
}

/* 激活状态类 */
.modal.active {
  display: block;
}
.overlay.active {
  display: block;
}
.btn-disabled {
  pointer-events: none;
  opacity: 0.6;
}

jQuery解决方案代码 #

$(document).ready(function() {
  // 弹窗触发逻辑
  $('.mail_box').click(function() {
    $('.modal_1').addClass('active');
    $('.overlay').addClass('active');
    // 临时禁用另一个按钮
    $('.tell_box').addClass('btn-disabled');
  });

  $('.tell_box').click(function() {
    $('.modal_2').addClass('active');
    $('.overlay').addClass('active');
    // 临时禁用另一个按钮
    $('.mail_box').addClass('btn-disabled');
  });

  // 关闭按钮逻辑
  $('.close-btn').click(function() {
    $(this).closest('.modal').removeClass('active');
    $('.overlay').removeClass('active');
    // 恢复所有按钮可用
    $('.mail_box, .tell_box').removeClass('btn-disabled');
  });

  // 点击遮罩（弹窗外部）关闭所有弹窗
  $('.overlay').click(function() {
    $('.modal').removeClass('active');
    $(this).removeClass('active');
    $('.mail_box, .tell_box').removeClass('btn-disabled');
  });
});

解决要点说明 #

1. 阻止弹窗重叠：通过在弹窗显示时给另一个触发按钮添加btn-disabled类，禁用其点击事件，避免同时触发两个弹窗
2. 外部点击关闭：直接监听遮罩层的点击事件，一次性移除所有弹窗的active类，同时恢复所有触发按钮的可用状态
3. 关闭按钮联动：点击弹窗内的关闭按钮时，仅关闭当前弹窗，并同步恢复按钮状态

内容的提问来源于stack exchange，提问作者Kenken