0

I have different modal windows, I added a close button but faced with duplicate code, how can I shorten the code for modalOverlay and closeBtn? and for some reason the second close button does not work, help pls https://jsfiddle.net/uza0jm8c/4/

enter code here
Katty
  • 11
  • 5

2 Answers2

0

Your code added the click event only to the first button. Below code will make both buttons work:

var closeBtn = document.getElementsByClassName("btn-close");

for (var i = 0; i < closeBtn.length; i++) {
    closeBtn[i].addEventListener('click', (e) => {
        modalOverlay.classList.remove('modal-overlay--visible');
        modals.forEach((el) => {
            el.classList.remove('modal--visible');
        });
    });
}
Uwe
  • 72
  • 7
0

You have two closeBtn you should be use document.querySelectorAll and make a forEach for you closeBtn

const btns = document.querySelectorAll('.btn');
const modalOverlay = document.querySelector('.modal-overlay');
const closeBtn = document.querySelectorAll('.btn-close');
const modals = document.querySelectorAll('.modal');

btns.forEach((el) => {
  el.addEventListener('click', (e) => {
    let path = e.currentTarget.getAttribute('data-path');

    modals.forEach((el) => {
      el.classList.remove('modal-overlay--visible');
    });

    document.querySelector(`[data-target="${path}"]`).classList.add('modal--visible')
    modalOverlay.classList.add('modal-overlay--visible');
  });
});

modalOverlay.addEventListener('click', (e) => {
  if (e.target === modalOverlay) {
    modalOverlay.classList.remove('modal-overlay--visible');
    modals.forEach((el) => {
      el.classList.remove('modal--visible');
    });
  }
});

closeBtn.forEach((el) => {
  el.addEventListener('click', (e) => {
     modalOverlay.classList.remove('modal-overlay--visible');
     modals.forEach((el) => {
       el.classList.remove('modal--visible');
     });
  });
});
.modal{
  background-color: #fff;
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  display: none;
}
.modal-overlay{
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    width: 100%;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease-in-out;
    z-index: 999;
}
.modal-overlay--visible{
  opacity: 1;
  visibility: visible;
  transition: all 0.3s ease-in-out;
}
.modal--visible{
  display: block;
}
<button class="btn header__box-btn" data-path="one">1</button>
<button class="btn header__box-btn" data-path="two">2</button>

<div class="modals">
  <div class="modal-overlay">
    <div class="modal modal--1" data-target="one">
      modal 1
      <button class="btn-close">close</button>
    </div>
    <div class="modal modal--2" data-target="two">
      modal 2
       <button class="btn-close">close</button>
    </div>
  </div>
</div>
Elvis
  • 75
  • 6