页面多Modal点击仅显示同一个的问题排查求助

问题根源 #

• a标签默认跳转干扰：按钮使用<a>标签且带有href，点击时触发锚点跳转，干扰Modal的显示逻辑。
• 事件覆盖：两个JS文件分别给window.onclick赋值，后加载的脚本会覆盖前者，导致只有一个Modal的空白关闭逻辑生效。
• 拼写错误：event.taget应为event.target，两处错误导致空白区域关闭逻辑完全失效。

修正后的代码 #

HTML

<html>
<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="styles/contact.css">
</head>
<body>
  <div class="main">
    <div class="container">
      <div class="socials-3">
        <a class="fa fa-envelope-o" id="email"></a>
        <div id="email-modal" class="email-modal">
          <div class="socials-modal-content">
            <span class="close email-close">&times;</span>
            <p>fun<span class="middle-colour">@</span>wbf<span class="middle-colour">.</span>com</p>
          </div>
        </div>
        <a class="fa fa-phone" id="phone"></a>
        <div id="phone-modal" class="phone-modal">
          <div class="socials-modal-content">
            <span class="close phone-close">&times;</span>
            <p>01234567890</p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <script src="js/modals.js"></script>
</body>
</html>

JavaScript（modals.js）

// 邮箱Modal控制
const emailModal = document.getElementById("email-modal");
const emailBtn = document.getElementById("email");
const emailSpan = document.querySelector(".email-close");

emailBtn.addEventListener("click", (e) => {
  e.preventDefault();
  emailModal.style.display = "block";
});

emailSpan.addEventListener("click", () => {
  emailModal.style.display = "none";
});

// 电话Modal控制
const phoneModal = document.getElementById("phone-modal");
const phoneBtn = document.getElementById("phone");
const phoneSpan = document.querySelector(".phone-close");

phoneBtn.addEventListener("click", (e) => {
  e.preventDefault();
  phoneModal.style.display = "block";
});

phoneSpan.addEventListener("click", () => {
  phoneModal.style.display = "none";
});

// 点击空白区域关闭对应Modal
window.addEventListener("click", (event) => {
  if (event.target === emailModal) {
    emailModal.style.display = "none";
  } else if (event.target === phoneModal) {
    phoneModal.style.display = "none";
  }
});

CSS（优化后）

.fa {
  padding: 80px;
  font-size: 50px;
  width: 50px;
  text-align: center;
  text-decoration: none;
  margin: 10px 10px;
  border-radius: 10%;
  color: white;
  transition: 0.7s;
}

.fa-envelope-o {
  background: #199cad;
}

.fa-phone {
  background: #121e88;
}

.container {
  text-align: center;
  padding: 50px;
}

.middle-colour {
  color: #00ffff;
}

/* 合并Modal公共样式 */
.email-modal, .phone-modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.4);
}

.socials-modal-content {
  background-color: rgba(0, 0, 0, 0.4);
  margin: 15% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 25%;
  color: white;
  font-size: 20px;
}

.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

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

关键修正说明 #

• 移除<a>标签的href或在点击事件中调用e.preventDefault()，阻止默认跳转行为，避免干扰Modal显示。
• 使用addEventListener绑定事件，替代直接赋值onclick，防止事件被覆盖，同时统一处理空白区域关闭逻辑。
• 修正event.taget拼写错误为event.target，确保空白区域关闭功能正常。
• 合并Modal的公共CSS样式，减少代码冗余。

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