как закрыть модальное окно при клике вне его с множественными исключениями

Question

есть кнопки ( кол-во может меняться от 1 до 100) при клике на них окно открывается ( модальное), а при нажатие вне окна оно должно закрываться но если мы нажимаем на кнопки оно не должно закрываться( я не знаю какое кол-во кнопок в этом вся загвоздка)

html :

<div class="parent">
  <div class="button"></div>
  <div class="button"></div>
  <div class="button"></div>
  <div class="button"></div>
  <div class="modal"></div>
</div>

js:

for (let i = 0; i < button.length; i++) {
    button[i].addEventListener('click', function () {
      modal.classList.add('active');
    })
}

document.addEventListener('click', (e) => {
    const withinBoundaries = e.composedPath().includes(modal);
    if (modal.classList.contains('active') && !withinBoundaries) {
        modal.classList.remove('active');
    }
})

в последнем куске js кода нужно что-то добавить чтобы он проверял клик по кнопкам (типа если клик сделан по кнопке, тогда код не выполняется, но убей не могу придумать как это сделать, все перепробывал и циклы и всякую дичь не хочет работать)

Answer 1

есть кнопки ( кол-во может меняться от 1 до 100) при клике на них окно открывается ( модальное), а при нажатие вне окна оно должно закрываться но если мы нажимаем на кнопки оно не должно закрываться

Поскольку ТС не особенно позаботился о тестовом примере... Для наглядности я его сделал сам...

Добавил единый обработчик на "кнопки" ТСа... Так же добавил обработчик на весь документ. Он-то и отслеживает нужно ли закрывать "модалку" или нет.

const om = document.querySelector('.modal')

document.querySelector('body').addEventListener('click', e => {
  if (e.target.closest('.parent')) return
  om.classList.remove('active')
})
document.querySelector('.parent').addEventListener('click', e => {
  if (e.target.closest('.button')) return button(e.target)
})
//
function button(self) {
  om.textContent = "Текст для " + self.textContent
  om.classList.add('active')
}

body {
  height: 100vh;
}
.modal {
  display: none;
  position: fixed;
  top: 50px;
  right: 50px;
  padding: 10px;
  border: 1px solid;
  border-radius: 20px;
}

.modal.active {
  display: block;
}

<div class="parent">
  <div class="button">Пункт 1</div>
  <div class="button">Пункт 2</div>
  <div class="button">Пункт 3</div>
  <div class="button">Пункт 4</div>
  <div class="modal"></div>
</div>

БЛОГ НА HUSL

как закрыть модальное окно при клике вне его с множественными исключениями

Ответы (1 шт):