Tengo 6 modales diferentes. Cada modal tiene un botón de salida llamado 'modal-box__exit-button'. He probado algunos JS para que los modales se cierren cuando un usuario hace clic en el botón de salida, pero debo estar escribiendo mal. Aquí está mi código:
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>(Cada modal es la misma estructura, solo cambia la información dentro).
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>