I am working on implementing 6 different modals, each featuring an exit button named 'modal-box__exit-button'. I have attempted to use JavaScript to close the modals when the exit button is clicked, but it seems like my code may have some errors. Here is what I have tried:
const btns = document.querySelectorAll("[data-target]");
const closedModal = document.querySelectorAll(".modal-box__exit-button");
btns.forEach(btn => {
btn.addEventListener('click', () => {
document.querySelector(btn.dataset.target).classList.add('modal-pop-up--active');
if (typeof window != 'undefined' && window.document) {
document.body.style.overflow = 'hidden';
}
})
})
closedModal.forEach(btn => {
btn.addEventListener('click', () => {
btns.classList.remove('modal-pop-up--active');
})
})<div class="modal-pop-up" id="modal4">
<div class="modal-block">
<div class="modal-box__exit-button">
<svg stroke="currentColor" fill="currentColor" stroke-width="0" version="1.2" baseProfile="tiny"
viewBox="0 0 24 24" class="btn" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
<path
d="M17.414 6.586c-.78-.781-2.048-.781-2.828 0l-2.586 2.586-2.586-2.586c-.78-.781-2.048-.781-2.828 0-.781.781-.781 2.047 0 2.828l2.585 2.586-2.585 2.586c-.781.781-.781 2.047 0 2.828.39.391.902.586 1.414.586s1.024-.195 1.414-.586l2.586-2.586 2.586 2.586c.39.391.902.586 1.414.586s1.024-.195 1.414-.586c.781-.781.781-2.047 0-2.828l-2.585-2.586 2.585-2.586c.781-.781.781-2.047 0-2.828z">
</path>
</svg>
</div>
<div class="modal-content-inner">
<h5>{{ pages['why-we-dont-offer-free-shipping'].title }}</h5>
<p>{{ pages['why-we-dont-offer-free-shipping'].content }} </p>
</div>
<div class="modal-box__contact-button">
<a href="/pages/contact-us" class="bottom-button">Contact Us</a>
</div>
</div>
</div>(All modals follow a similar structure with differing content).