How to close a modal with Javascript?-CodePudding

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  id="modal4">
  <div >
    <div >
      <svg stroke="currentColor" fill="currentColor" stroke-width="0" version="1.2" baseProfile="tiny"
        viewBox="0 0 24 24"  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 >
      <h5>{{ pages['why-we-dont-offer-free-shipping'].title }}</h5> 
      <p>{{ pages['why-we-dont-offer-free-shipping'].content }} </p>
    </div>
    <div >
      <a href="/pages/contact-us" >Contact Us</a>
    </div>
  </div>
</div>

(Each modal is the same structure just the info inside changes).

CodePudding user response：

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  id="modal4">
  <div >
    <div >
      <svg stroke="currentColor" fill="currentColor" stroke-width="0" version="1.2" baseProfile="tiny"
        viewBox="0 0 24 24"  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 >
      <h5>{{ pages['why-we-dont-offer-free-shipping'].title }}</h5> 
      <p>{{ pages['why-we-dont-offer-free-shipping'].content }} </p>
    </div>
    <div >
      <a href="/pages/contact-us" >Contact Us</a>
    </div>
  </div>
</div>
<div  id="modal5">
  <div >
    <div >
      <svg stroke="currentColor" fill="currentColor" stroke-width="0" version="1.2" baseProfile="tiny"
        viewBox="0 0 24 24"  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 >
      <h5>{{ pages['why-we-dont-offer-free-shipping'].title }}</h5> 
      <p>{{ pages['why-we-dont-offer-free-shipping'].content }} </p>
    </div>
    <div >
      <a href="/pages/contact-us" >Contact Us</a>
    </div>
  </div>
</div>