Чтобы в одном модальном окне выводился разный контент в PHP, можно использовать технологию AJAX (асинхронный JavaScript и XML).
Для начала, создайте модальное окно с помощью HTML и CSS. Например:
<div id="myModal" class="modal"> <div class="modal-content"> <span class="close">×</span> <div id="modal-content"></div> </div> </div>
Затем, в JavaScript, добавьте обработчик события клика на элемент, который вызывает модальное окно. Например:
// Получаем ссылку на элемент var link = document.getElementById("myModalLink"); // Добавляем обработчик события клика link.onclick = function() { // Открываем модальное окно document.getElementById("myModal").style.display = "block"; // Загружаем контент с помощью AJAX var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function() { if (xhr.readyState === XMLHttpRequest.DONE) { if (xhr.status === 200) { // Выводим полученный контент в модальном окне document.getElementById("modal-content").innerHTML = xhr.responseText; } else { console.error("Произошла ошибка при загрузке контента"); } } }; // Здесь вы можете указать URL, с которого будет загрузка контента. // Например, если у вас есть две ссылки, вызывающие разный контент, вы можете передать URL в зависимости от выбранной ссылки. xhr.open("GET", "url", true); xhr.send(); };
Наконец, добавьте обработчик события для закрытия модального окна. Например:
// Получаем ссылку на элемент закрытия модального окна var close = document.getElementsByClassName("close")[0]; // Добавляем обработчик события клика close.onclick = function() { // Закрываем модальное окно document.getElementById("myModal").style.display = "none"; };
В данном примере мы использовали метод XMLHttpRequest
для выполнения AJAX-запроса на сервер и получения контента. Вы можете использовать свой собственный метод или фреймворк, если у вас уже есть предпочтения.
Таким образом, при клике на элемент, который вызывает модальное окно, будет выполнен AJAX-запрос на сервер с указанным URL. Полученный контент будет выведен в модальном окне. При клике на элемент закрытия модального окна, модальное окно будет закрыто. Вы можете изменить URL в AJAX-запросе в зависимости от выбранного контента.