不同ID模态框显示相同内容、关闭按钮失效问题解决方案

问题现象 #

• 预期交互：点击图像地图的不同热区，弹出对应内容的模态框
• 实际异常：
  • 点击任意热区都弹出相同内容的模态框
  • 模态框的关闭按钮无法正常触发关闭逻辑
  • 已为不同模态框设置独立ID、为不同热区绑定对应触发事件，异常仍存在

原始代码 #

样式代码 #

.modal { 
  display: none; /* 默认隐藏 */
  position: fixed; /* 固定定位 */
  z-index: 1; /* 层级置顶 */
  left: 0; 
  top: 0; 
} 

/* 模态框内容容器 */
.modal-content { 
  margin: 15% auto; 
  padding: 20px; 
} 

/* 关闭按钮样式 */
.close { 
  float: right;
  font-size: 28px; 
}

.close:hover, .close:focus { 
  color: black; 
  text-decoration: none; 
  cursor: pointer; 
}

结构与逻辑代码 #

<map name="2042434">
  <area onclick="myFunction1()" shape="poly" coords="46,59,65,45,96,70,198,95,337,173,348,217,348,274,391,296,361,438,235,440,238,258,48,59,61,64" alt="">
  <area onclick="myFunction2()" shape="poly" coords="393,296,349,274,347,217,374,208,425,230,440,203,429,162,446,152,513,192,548,184,582,238,577,329,493,380,490,398,409,435,362,440,380,336" alt="">
</map>
<img src="" alt="" border="0" width="703" height="794" usemap="#2042434">

<!-- 模态框1 -->
<div id="modal1" class="modal">
  <div class="modal-content">
    <span class="close">&times;</span>
    <p>模态框1文本内容</p>
  </div>
</div>

<script>
var modal=document.getElementById("modal1");
var span=document.getElementsByClassName("close")[0];

function myFunction1() {
  modal.style.display="block";
}

span.onclick=function() {
  modal.style.display="none";
}

window.onclick=function(event) {
  if (event.target==modal1) {
    modal.style.display="none";
  }
}
</script>

<!-- 模态框2 -->
<div id="modal2" class="modal">
  <div class="modal-content">
    <span class="close">&times;</span>
    <p>模态框2文本内容</p>
  </div>
</div>

<script>
var modal=document.getElementById("modal2");
var span=document.getElementsByClassName("close")[0];

function myFunction2() {
  modal.style.display="block";
}

span.onclick=function() {
  modal.style.display="none";
}

window.onclick=function(event) {
  if (event.target==modal2) {
    modal.style.display="none";
  }
}
</script>

问题根因 #

• 所有变量均声明在全局作用域，后定义的同名变量会覆盖之前的变量，导致事件绑定的目标对象错误
• 重复给window.onclick、同索引的关闭按钮绑定事件，后绑定的逻辑会覆盖之前的逻辑，导致关闭按钮、点击遮罩关闭功能失效
• 内联onclick事件绑定易引发作用域混乱问题

修复后完整代码 #

<map name="2042434">
  <area id="area1" shape="poly" coords="46,59,65,45,96,70,198,95,337,173,348,217,348,274,391,296,361,438,235,440,238,258,48,59,61,64" alt="">
  <area id="area2" shape="poly" coords="393,296,349,274,347,217,374,208,425,230,440,203,429,162,446,152,513,192,548,184,582,238,577,329,493,380,490,398,409,435,362,440,380,336" alt="">
</map>
<img src="" alt="" border="0" width="703" height="794" usemap="#2042434">
                    
<!-- 模态框1 -->
<div id="modal1" class="modal">
  <div class="modal-content">
    <span class="close">&times;</span>
    <p>模态框1文本内容</p>
  </div>
</div>
                    
<!-- 模态框2 -->
<div id="modal2" class="modal">                                                                            
  <div class="modal-content">                                                                            
    <span class="close">&times;</span>                                                                           
    <p>模态框2文本内容</p>                                                                            
  </div>
</div>

<script>
// 统一关闭所有模态框的公共方法
function closeModal() {
  document.querySelectorAll('.modal').forEach(function (modal) {
    modal.style.display = 'none';
  })
}

// 为所有关闭按钮绑定关闭事件
document.querySelectorAll('span.close').forEach(function (element) {
  element.addEventListener('click', function () {
    closeModal();
  })
});

// 模态框1逻辑，IIFE隔离作用域
(function () {
  var modal = document.getElementById("modal1");
  var area = document.getElementById("area1");                                                                    

  area.onclick = function() {
    modal.style.display = "block";
  }

  window.addEventListener('click', function(event) {
    if (event.target == modal1){
      closeModal();
    }
  });
})();
                    
// 模态框2逻辑，IIFE隔离作用域
(function () {
  var modal = document.getElementById("modal2");
  var area = document.getElementById("area2");                                                                    

  area.onclick = function() {
    modal.style.display = "block";
  }

  window.addEventListener('click', function(event) {
    if (event.target == modal2){
      closeModal();
    }
  });
})();
</script>

修复方案说明 #

• 新增统一closeModal公共方法，一次性关闭所有模态框，减少重复逻辑
• 遍历所有关闭按钮统一绑定事件，避免元素索引获取错误导致按钮失效
• 用IIFE（立即执行函数）隔离每个模态框的变量作用域，避免全局同名变量互相覆盖
• 移除内联onclick绑定，直接在JS中获取热区元素绑定事件，减少作用域混乱
• 改用addEventListener绑定window点击事件，避免重复赋值覆盖已有事件逻辑

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