href 无法从模式弹出窗口内部工作 不是引导程序，不是 JQUERY

Question

side元素是一个模式弹出窗口，里面有多个a href链接，但都不起作用。我可以右键单击并转到链接，但单击它不会有任何作用。开放模态是由Javascript触发的。没有可能导致冲突的外部库、插件等。

我在这里错过了什么？

const overlay = document.querySelector(".overlay");
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 closeModal = function() {
modal.classList.add("hidden");
overlay.classList.add("hidden");
const scrollY = document.body.style.top;
document.body.style.position = "";
document.body.style.top = "";
window.scrollTo(0, parseInt(scrollY || "0") * -1);
};
const modalCloseBtn = modal.querySelector(".close-modal");
modalCloseBtn.addEventListener("click", () => {
closeModal();
});
overlay.addEventListener("click", closeModal);
document.addEventListener("keydown", function(e) {
if (e.key === "Escape" && !modal.classList.contains("hidden")) {
closeModal();
}
});
});
});

.hidden {
display: none;
}
.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;
}
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(3px);
overflow-y: scroll;
z-index: 5;
}
.modal-title {
font-size: 2.4rem;
margin-bottom: 3rem;
}
.close-modal {
position: absolute;
top: 1.2rem;
right: 2rem;
font-size: 5rem;
color: #333;
cursor: pointer;
border: none;
background: none;
}

<article class="card" data-card="modal1">
<img class="card-img" src="img/card-thumb/cardImg.jpg" alt="card image">
<p class="card-title">open card modal</p>
</article>
<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>

Answer 1

好的。已发现并修复问题。

我使用scrollIntoView来处理页面导航和平滑滚动；a"；在我用"；a"；模态容器内部的元素。通过给页面导航一个额外的类来解决问题，然后只针对JS代码的那一部分针对该类！Doooooh。