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

Ссылка скопирована
HTML JavaScript PHP
3 января 2026 1 ответ

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

Это код вывода всех элементов из базы:

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 				}

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"); }

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>

<div class="popup" id="popup"> <div class="popup_window" id="popup_window"> </div> </div>

Дополнительно:

Не надо ставить как можно больше тэгов. Лучше оставить один, но конкретный, с которым проблема.
См.п.3.1 Регламента.

Ответы:

Дай каждому elements[i] html-аттрибут типа data-id="444", бери это значение в обработчике события и используй в AJAX-запросе для поиска соответствующего блока с информацией.

Похоже курсы Евгения Попова живы) На самом деле посмотрите в сторону MVC паттерна, так Вы сможете отделить бизнес логику от представления, тем самым в модальное окно можно будет проще пробросить необходимые данные.

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

Нужно решить такую задачу?

Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

Заказать помощь
Лучший ответ
1
Максим Павлов Ответ

Для вывода информации из базы данных в модальное окно на веб-странице можно использовать различные технологии, но одним из наиболее популярных способов является использование AJAX запросов с помощью JavaScript.

Прежде всего, необходимо создать модальное окно на HTML странице. Например, модальное окно может быть представлено в виде

элемента с уникальным id, который будет использоваться для дальнейшего обращения к нему.

Затем, вам потребуется написать скрипт на JavaScript, который будет обрабатывать событие открытия модального окна и отправлять AJAX запрос на сервер для получения данных из базы данных.

Пример кода на JavaScript:

// Функция для отправки AJAX запроса
function fetchDataFromDatabase() {
  var xhr = new XMLHttpRequest();
  xhr.open('GET', 'url_to_your_api_endpoint', true);
  xhr.onload = function() {
    if (xhr.status >= 200 && xhr.status < 300) {
      var data = JSON.parse(xhr.responseText);
      // Здесь можно обновить содержимое модального окна с полученными данными
    } else {
      console.error('Request failed with status: ' + xhr.status);
    }
  };
  xhr.send();
}

// Функция для отправки AJAX запроса function fetchDataFromDatabase() { var xhr = new XMLHttpRequest(); xhr.open('GET', 'url_to_your_api_endpoint', true); xhr.onload = function() { if (xhr.status >= 200 && xhr.status < 300) { var data = JSON.parse(xhr.responseText); // Здесь можно обновить содержимое модального окна с полученными данными } else { console.error('Request failed with status: ' + xhr.status); } }; xhr.send(); }

Замените 'url_to_your_api_endpoint' на URL вашего API, который будет обрабатывать AJAX запрос и возвращать данные из базы данных.

На стороне сервера, вам нужно будет создать API, который будет обрабатывать запрос и возвращать данные. Например, если вы используете PHP, то ваш API может выглядеть примерно так:

query('SELECT * FROM table');
$data = $stmt->fetchAll(PDO::FETCH_ASSOC);
 
header('Content-Type: application/json');
echo json_encode($data);
?>

query('SELECT * FROM table'); $data = $stmt->fetchAll(PDO::FETCH_ASSOC); header('Content-Type: application/json'); echo json_encode($data); ?>

После того как данные будут получены с сервера, вы можете обновить содержимое модального окна с помощью JavaScript, чтобы отобразить полученные данные.

Таким образом, вы сможете вывести информацию из базы данных в модальное окно с использованием AJAX запросов и JavaScript.

Другие ответы (0)

Пока нет других ответов. Будьте первым, кто поможет автору.

Ответить на вопрос

комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Вам также может быть интересно

Веб-разработка Какие особенности разработки сайтов под тор/даркнет? 1 ответ Веб-разработка Как поправить этот код чтобы можно было обновить данные в бд( при взаимодействии с методом класса в Node.js)? 2 ответов Android Как заменить класс AuthorizationCodeInstalledApp на Android (Google API)? 1 ответ Google Как подтвердить аккаунт Google? 1 ответ