I have 6 different modals. Each modal has a exit button named 'modal-box__exit-button'. I have tried out some JS to get the modals to close when a user clicks the exit button but I must be writing it wrong. Here is my code:
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>(Each modal is the same structure just the info inside changes).
const closeModalsBtn = document.querySelectorAll(".modal-box__exit-button");
closeModalsBtn.forEach(closeBtn=>{
closeBtn.addEventListener('click' , (e) =>{
e.currentTarget.parentElement.parentElement.style.display = 'none'
})
}).modal-pop-up{
border : 2px dashed red;
margin: 20px auto;
}<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>
<div class="modal-pop-up" id="modal5">
<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>