@S_Tigrov

Как вывести информацию из базы данных в модальное окно?

Есть база данных, из которой на сайт выводятся все элементы. При нажатии на любой из элементов открывается модальное окно с подробной информацией. Как сделать так, чтобы информация в модальном окне менялась в зависимости от того на какой элемент я нажал?

Это код вывода всех элементов из базы:
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>
  • Вопрос задан
  • 258 просмотров
Пригласить эксперта
Ответы на вопрос 2
@humoured
Вы всё на свете найдёте в коробке с карандашами
Дай каждому elements[i] html-аттрибут типа data-id="444", бери это значение в обработчике события и используй в AJAX-запросе для поиска соответствующего блока с информацией.
Ответ написан
Комментировать
@OlegFrontend
Ведущий frontend разработчик.
Похоже курсы Евгения Попова живы) На самом деле посмотрите в сторону MVC паттерна, так Вы сможете отделить бизнес логику от представления, тем самым в модальное окно можно будет проще пробросить необходимые данные.

Дальше можно идти на разделения фронта и бэка - React JS + Backend (PHP, GO и т.п)
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы