如何在jQuery中创建多个模态框？现有代码异常的解决咨询

核心思路 #

通过**数据属性（data-modal-id）**将触发按钮与对应的模态框绑定，确保每个操作只影响目标模态框，而非所有模态框。

具体修改步骤 #

1. 更新 HTML 结构

给每个模态框添加唯一 ID，并给所有触发元素（打开按钮、关闭按钮、遮罩层、模态内的取消按钮）添加 data-modal-id 属性，值与目标模态框的 ID 保持一致。

示例完整代码（包含两个模态框）：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<style>
/* 保留原 CSS 样式不变 */
.mi-modal {
    position: fixed;
    z-index: 10000;
    top: 0;
    left: 0;
    visibility: hidden;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}
.mi-modal.modal-visible {
    visibility: visible;
}
.mi-modal-overlay {
  position: fixed;
  z-index: 10;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: hsla(0, 0%, 0%, 0.4);
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s linear 0.3s, opacity 0.3s;
  box-sizing: border-box;  
}
.mi-modal.modal-visible .mi-modal-overlay {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}
.mi-modal-wrapper {
  position: absolute;
  z-index: 9999;
  top: 6em;
  left: 50%;
  width: 32em;
  margin-left: -16em;
  background-color: #fff;
  box-shadow: 0 0 1.5em hsla(0, 0%, 0%, 0.35);
  box-sizing: border-box;  
}
.mi-modal-transition {
  transition: all 0.4s;
  transform: translateY(-10%);
  opacity: 0;
}
.mi-modal.modal-visible .mi-modal-transition {
  transform: translateY(0);
  opacity: 1;
}
.mi-modal-header,
.mi-modal-content {
  padding: 1em;
}
.mi-modal-header {
  position: relative;
  background-color: #fff;
  box-shadow: 0 1px 2px hsla(0, 0%, 0%, 0.06);
  border-bottom: 1px solid #e8e8e8;
}
.mi-modal-close {
  position: absolute;
  top: 0;
  right: 0;
  padding: 1em;
  color: #aaa;
  background: none;
  border: 0;
  font-size: 18px;
}
.mi-modal-close:hover {
  color: #777;
}
.mi-modal-heading {
  font-size: 1.125em;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.mi-modal-content > *:first-child {
  margin-top: 0;
}
.mi-modal-content > *:last-child {
  margin-bottom: 0;
}
.mi-modal.modal-scroll .mi-modal-content{
max-height: 60vh;
overflow-y: scroll;
}
.mi-modal.modal-scroll .mi-modal-wrapper {
  position: absolute;
  z-index: 9999;
  top: 2em;
  left: 50%;
  width: 32em;
  margin-left: -16em;
  background-color: #CDf;
  box-shadow: 0 0 1.5em hsla(0, 0%, 0%, 0.35);
  box-sizing: border-box;  
}
</style>

<!-- 第一个模态框 -->
<button class="mi-modal-toggle" data-modal-id="modal-1">Show Modal 1</button>
<div class="mi-modal" id="modal-1">
  <div class="mi-modal-overlay mi-modal-toggle" data-modal-id="modal-1"></div>
  <div class="mi-modal-wrapper mi-modal-transition">
    <div class="mi-modal-header">
      <button class="mi-modal-close mi-modal-toggle" data-modal-id="modal-1">&times;</button>
      <h2 class="mi-modal-heading">This is Modal 1</h2>
    </div>
    <div class="mi-modal-body">
      <div class="mi-modal-content">
        <p>模态框1的内容：Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        <button class="mi-btn btn-danger mi-ripple mi-ripple-light mi-modal-toggle" data-modal-id="modal-1">No</button>
        <button class="mi-btn btn-info mi-ripple mi-ripple-light">Confirm</button>
      </div>
    </div>
  </div>
</div>

<!-- 第二个模态框 -->
<button class="mi-modal-toggle" data-modal-id="modal-2">Show Modal 2</button>
<div class="mi-modal" id="modal-2">
  <div class="mi-modal-overlay mi-modal-toggle" data-modal-id="modal-2"></div>
  <div class="mi-modal-wrapper mi-modal-transition">
    <div class="mi-modal-header">
      <button class="mi-modal-close mi-modal-toggle" data-modal-id="modal-2">&times;</button>
      <h2 class="mi-modal-heading">This is Modal 2</h2>
    </div>
    <div class="mi-modal-body">
      <div class="mi-modal-content">
        <p>模态框2的内容：Impedit eum delectus, libero, accusantium dolores inventore obcaecati.</p>
        <button class="mi-btn btn-danger mi-ripple mi-ripple-light mi-modal-toggle" data-modal-id="modal-2">No</button>
        <button class="mi-btn btn-info mi-ripple mi-ripple-light">Confirm</button>
      </div>
    </div>
  </div>
</div>

<script>
$('.mi-modal-toggle').on('click', function(e) {
  e.preventDefault();
  // 获取当前触发元素绑定的模态框ID
  const targetModalId = $(this).data('modal-id');
  // 仅对目标模态框切换显示状态
  $('#' + targetModalId).toggleClass('modal-visible');
});
</script>

2. 关键代码说明

• 数据属性绑定：每个触发元素的 data-modal-id 和对应模态框的 id 一一对应，建立唯一关联，避免操作混淆。
• 精准选择模态框：点击触发元素时，通过 $(this).data('modal-id') 获取目标模态框的ID，再通过 $('#' + targetModalId) 精准定位该模态框，只对它切换 modal-visible 类，不会影响其他模态框。

内容的提问来源于stack exchange，提问作者Asma Binta Younus