如何使用 Javascript 关闭模式？

Question

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).

Answer 1

 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>