Hej,
na poczatku zaznaczam, ze nie miałem nigdy styczności z JavaScript. Buduję sobie stronę, wykorzystuję wszelkie poradniki i na ogół to wystarcza.
Mam jednak drobny problem, bardziej dotyczący "jak coś zrobić, żeby było względnie prawidłowo" a nie "dlaczego nie działa".
Chciałbym umieścić kilka popup modal 'i- klikam na stronie w kolejne wiersze - i zależnie w który wiersz klikę - taki modal ma mi się pokazać.
Pracuję na podstawie tego poradnika:
https://sabe.io/tutorials/how-to-create-modal-popup-box
Kwestia polega na tym, że wykorzystując:
// Popup modal
var modal_pop = document.querySelector(".modal_pop");
var trigger = document.querySelector(".trigger");
var closeButton = document.querySelector(".close-button");
function toggleModal() {
modal_pop.classList.toggle("show-modal");
}
function windowOnClick(event) {
if (event.target === modal_pop) {
toggleModal();
}
}
trigger.addEventListener("click", toggleModal);
closeButton.addEventListener("click", toggleModal);
window.addEventListener("click", windowOnClick);
Teoretycznie mogę kilkukrotnie przekopiować powyższy kod, zmienić nazwy zmiennych i przypisać konkretne zmienne do obszarów w htmlu.
Jednak no, nie podoba mi się takie rozwiązanie.
Myślałem, żeby np. stworzyć kilka zmiennych modal trigger oraz close_button - przypisać je do odpowiednich fragmentów html, natomiast w funkcji toggleModal pobierać modal jako argument i wówczas zmieniać jego stan.
Jest taka możliwość?
Edit:
Natomiast funkcja windowOnClick(event) powinna gasić każdy z otwartych modali. Nie znalazłem jednak funkcji zamykającej modal.(samo toggle niestety nie pomoże)