Как открыть нужное модальное окно?

Question

Задача тривиальная - как правильно переделать данный код, чтобы открывалось модальное окно родителя, т.e. например при нажатии кнопки №2 открывалось только модальное окно №2?

const modalTrigger = document.querySelectorAll('[data-modal]'),
  modal = document.querySelector('.modal'),
  modalCloseBtn = document.querySelector('[data-close]');

modalTrigger.forEach((el) => {
  el.addEventListener('click', () => {
    modal.classList.add('show');
    modal.classList.remove('hide');
    document.body.style.overflow = 'hidden';
  });
});

function closeModal() {
  modal.classList.add('hide');
  modal.classList.remove('show');
  document.body.style.overflow = '';
}

modalCloseBtn.addEventListener('click', closeModal);

.hide {
  display: none;
}

.show {
  display: block !important;
}

.modal {
  position: fixed;
  background-color: red;
  z-index: 77777;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
}

.modal-close {
  font-size: 25px;
  cursor: pointer;
}

.modal-close:hover {
  color: white;
}

<div class="item">
  <p>Текст №1</p>
  <button data-modal>Read me</button>
  <div class="modal hide">
    <div data-close class="modal-close">&times;</div>
    <p>Mодальноe окно №1</p>
  </div>
</div>

<div class="item">
  <p>Текст №2</p>
  <button data-modal>Read me</button>
  <div class="modal hide">
    <div data-close class="modal-close">&times;</div>
    <p>Mодальноe окно №2</p>
  </div>
</div>

<div class="item">
  <p>Текст №3</p>
  <button data-modal>Read me</button>
  <div class="modal hide">
    <div data-close class="modal-close">&times;</div>
    <p>Mодальноe окно №3</p>
  </div>
</div>

Answer 1

Почемe-то вы решили, что вызов модального окна заслуживает цикла по элементам, а закрытие - нет. Странно. Я переделал это.

Также вы решили, что вызов модального окна заслуживает цикла по элементам, а модальное окно берётся только одно единственное. Тоже странно....

В целом, чтобы открыть нужную модалку, от текущего кликнутого элемента я нашёл родителя и у родителя нашёл ту самую модалку. По текущей разметке и кнопка и модалка находятся в одном и том же родителе

const modalTrigger = document.querySelectorAll('[data-modal]');
const modalCloseBtn = document.querySelectorAll('[data-close]');
let modal = null;  

modalTrigger.forEach((el) => {
  el.addEventListener('click', () => {
    modal = el.parentElement.querySelector('.modal');
    modal.classList.add('show');
    modal.classList.remove('hide');
    document.body.style.overflow = 'hidden';
  });
});

function closeModal() {
  modal.classList.add('hide');
  modal.classList.remove('show');
  document.body.style.overflow = '';
  modal= null;
}

modalCloseBtn.forEach((el) => {
  el.addEventListener('click', closeModal);  
});

//modalCloseBtn.addEventListener('click', closeModal);

.hide {
  display: none;
}

.show {
  display: block !important;
}

.modal {
  position: fixed;
  background-color: red;
  z-index: 77777;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
}

.modal-close {
  font-size: 25px;
  cursor: pointer;
}

.modal-close:hover {
  color: white;
}

<div class="item">
  <p>Текст №1</p>
  <button data-modal>Read me</button>
  <div class="modal hide">
    <div data-close class="modal-close">&times;</div>
    <p>Mодальноe окно №1</p>
  </div>
</div>

<div class="item">
  <p>Текст №2</p>
  <button data-modal>Read me</button>
  <div class="modal hide">
    <div data-close class="modal-close">&times;</div>
    <p>Mодальноe окно №2</p>
  </div>
</div>

<div class="item">
  <p>Текст №3</p>
  <button data-modal>Read me</button>
  <div class="modal hide">
    <div data-close class="modal-close">&times;</div>
    <p>Mодальноe окно №3</p>
  </div>
</div>

БЛОГ НА HUSL

Как открыть нужное модальное окно?

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