Задача тривиальная - как правильно переделать данный код, чтобы открывалось модальное окно родителя, т.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">×</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">×</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">×</div>
<p>Mодальноe окно №3</p>
</div>
</div>