如何从 modalOverlay 和 closeBtn 中删除重复代码？

Question

我有不同的模态windows，我添加了一个关闭按钮但面临重复代码，如何缩短 modalOverlay 和 closeBtn 的代码？由于某种原因，第二个关闭按钮不起作用，请帮助 https://jsfiddle.net/uza0jm8c/4/

enter code here

Answer 1

您的代码仅向第一个按钮添加了点击事件。下面的代码将使两个按钮都起作用：

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');
        });
    });
}

Answer 2

你有两个 closeBtn 你应该使用 document.querySelectorAll 并为你做一个 forEach 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>

如何从 modalOverlay 和 closeBtn 中删除重复代码？

how to remove duplicate code from modalOverlay and closeBtn?

javascript

modal-window