Есть база данных, из которой на сайт выводятся все элементы. При нажатии на любой из элементов открывается модальное окно с подробной информацией. Как сделать так, чтобы информация в модальном окне менялась в зависимости от того на какой элемент я нажал?
Это код вывода всех элементов из базы:
while ($row = mysqli_fetch_array($search_result)) {
?>
<div id="<?= $row[0] ?>" class="book">
<div id="open_popup" class="book_img">
<img src="img/<?= $row[3] ?>" alt="">
<div class="rating"><?= $row[4] ?></div>
</div>
<div class="name"><?= $row[1] ?></div>
<div class="author"><?= $row[2] ?></div>
</div>
<?php
}
Код открытия и закрытия модального окна:
var elements = document.querySelectorAll(".book_img");
for (var i = 0; i < elements.length; i++) {
elements[i].onclick = function(){
document.getElementById("popup").classList.add("open");
}
}
document.getElementById("close_popup").onclick = function(){
document.getElementById("popup").classList.remove("open");
}
Код для модального окна
<div class="popup" id="popup">
<div class="popup_window" id="popup_window">
</div>
</div>
Простой
