非Bootstrap/jQuery模态弹窗内a href链接无法点击问题排查

问题根源 #

你的模态框内链接点击无响应的核心原因是DOM结构异常+事件冒泡干扰+重复事件绑定叠加：

1. HTML标签未闭合：模态框内的<h5 class="modal-title">闭合标签写错成了<h5>，浏览器自动修复DOM结构时可能干扰内部链接的事件触发逻辑。
2. 事件冒泡未拦截：点击链接时事件会向上冒泡到模态框元素，若存在重复绑定的事件（多次点击card后叠加），可能意外阻止链接的默认跳转行为。
3. 重复事件绑定：每次点击card都会给document和overlay绑定新的事件，多次触发后事件叠加，引发异常逻辑。

修复步骤 #

1. 修正HTML结构错误 #

把模态框内的错误闭合标签改回</h5>：

<aside class="modal hidden" id="modal1">
  <button class="close-modal">&times;</button>
  <h5 class="modal-title">
    <a href='https://www.google.com/' target='_blank' rel='noreferrer noopener nofollow'>WHY IS THIS LINK NOT OPENING?</a>
  </h5> <!-- 修正此处的闭合标签 -->
</aside>

2. 阻止模态框内部事件冒泡 #

在打开模态框时，给模态框添加事件拦截，避免内部元素的事件向上冒泡干扰：

card.forEach((card) => {
  card.addEventListener("click", () => {
    // ... 原有打开模态框的代码 ...

    // 新增：拦截模态框的事件冒泡
    modal.addEventListener('click', function(e) {
      e.stopPropagation();
    });

    // ... 原有绑定关闭事件的代码 ...
  });
});

3. 优化事件绑定（避免重复叠加） #

将全局事件（如ESC关闭、overlay点击关闭）移到card点击事件外部，只绑定一次：

// 全局ESC关闭事件，只绑定一次
document.addEventListener("keydown", function(e) {
  const visibleModal = document.querySelector('.modal:not(.hidden)');
  if (e.key === "Escape" && visibleModal) {
    const scrollY = document.body.style.top;
    document.body.style.position = "";
    document.body.style.top = "";
    window.scrollTo(0, parseInt(scrollY || "0") * -1);
    visibleModal.classList.add("hidden");
    overlay.classList.add("hidden");
  }
});

// overlay点击关闭事件，只绑定一次
overlay.addEventListener("click", function() {
  const visibleModal = document.querySelector('.modal:not(.hidden)');
  if (visibleModal) {
    const scrollY = document.body.style.top;
    document.body.style.position = "";
    document.body.style.top = "";
    window.scrollTo(0, parseInt(scrollY || "0") * -1);
    visibleModal.classList.add("hidden");
    overlay.classList.add("hidden");
  }
});

// card点击事件仅负责打开模态框
const card = document.querySelectorAll(".card");
card.forEach((card) => {
  card.addEventListener("click", () => {
    const cardId = card.getAttribute("data-card");
    const modal = document.getElementById(`${cardId}`);

    modal.classList.remove("hidden");
    overlay.classList.remove("hidden");
    const vScrollPos = window.scrollY;
    document.body.style.position = "fixed";
    document.body.style.top = `-${vScrollPos}px`;

    const modalCloseBtn = modal.querySelector(".close-modal");
    // 先移除旧监听，避免重复绑定
    modalCloseBtn.removeEventListener("click", closeModal);
    modalCloseBtn.addEventListener("click", () => {
      const scrollY = document.body.style.top;
      document.body.style.position = "";
      document.body.style.top = "";
      window.scrollTo(0, parseInt(scrollY || "0") * -1);
      modal.classList.add("hidden");
      overlay.classList.add("hidden");
    });

    // 拦截模态框内部事件冒泡
    modal.addEventListener('click', function(e) {
      e.stopPropagation();
    });
  });
});

4. 移除模态框全局光标设置（可选） #

删除.modal类中的cursor: pointer;，让内部链接使用默认光标样式，避免浏览器事件优先级判断异常：

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100vw - 16rem);
  overflow-y: scroll;
  max-height: calc(100vh - 16rem);
  background-color: white;
  padding: 6rem;
  border-radius: 5px;
  box-shadow: 0 3rem 5rem rgba(0, 0, 0, 0.3);
  z-index: 10;
  pointer-events: all;
  /* 移除 cursor: pointer; */
}

验证修复 #

完成修改后，点击模态框内的链接即可正常触发跳转，右键跳转功能不受影响。

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