- Введение. Постановка задачи модальных окон на сайте Joomla 4.
- HTML-код для всплывающего окна
- Javascript всплывающего окна
- Обработчик запроса содержимого модального окна на стороне сервера
- Результат
Введение. Постановка задачи модальных окон на сайте Joomla 4.
Этот совет возникает из возможного компонента, который имеет много информации, пока не подгруженной на страницу. Например, пользователь сайта на Joomla 4 хочет увидеть некоторые довольно большие фрагменты дополнительных данных или выполнить какую-либо задачу, например отправить электронное письмо. Эти функции запускаются кнопками или ссылками на исходной странице, содержащий такой функционал. Событие, инициализированное пользователем, например, клик по кнопке, открывает дополнительный диалог в модальном окне, и отображение диалогового окна запускает извлечение данных с помощью Javasript по специальному запросу с сервера в это модальное окно.
HTML-код для всплывающего окна
Код кнопки запуска находится в таблице в файле default.php с шаблоном вывода списка. По умолчанию существует 20 строк данных, поэтому 20 похожих кнопок:
<button
class="btn btn-sm btn-info w5rem mb-1"
data-bs-toggle="modal"
data-bs-target="#modal-box"
data-bs-title="Починка шельфовых ледников"
data-bs-id="14794"
data-bs-action="showCampDescription"
onclick="return false;">
Описание
</button>Код всплывающего диалогового окна включен в нижнюю часть файла следующим образом:
<?php include_once JPATH_COMPONENT . '/layouts/modalbox.php'; ?>И файл макета содержит следующее:
<?php echo HTMLHelper::_(
'bootstrap.renderModal',
'modal-box', // selector
array( // options
'modal-dialog-scrollable' => true,
'title' => 'Тут название',
'footer' => '<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Закрыть</button>
<button type="button" class="btn btn-primary" id="modal-save">Отправить</button>',
),
'<div id="modal-body">Содержимое, заданное ajax.</div>'
); ?>Обратите внимание, что на этом этапе модальное диалоговое окно содержит текст-заполнитель для заголовка, тела и двух кнопок нижнего колонтитула. Эти элементы обновляются с помощью Javascript при отображении модального диалогового окна.
Javascript всплывающего окна
var modalbox = document.getElementById("modal-box");
var modalSave = document.getElementById("modal-save");
if (modalbox) {
var modalTitle = modalbox.querySelector('.modal-title');
var modalBody = modalbox.querySelector('.modal-body');
}
modalbox && modalbox.addEventListener('show.bs.modal', function (event) {
// Кнопка, которая активировала всплывающее окно
let button = event.relatedTarget;
// Извлечение информации из атрибутов data-bs-*
let title = button.getAttribute('data-bs-title');
let action = button.getAttribute('data-bs-action');
let item_id = button.getAttribute('data-bs-id');
modalTitle.textContent = title;
// Очистка содержимого модального окна
modalBody.textContent = 'Извлечение контента - Пожалуйста, ждите!';
// получить описание и внедрить в код модального окна
if (action == 'showCampDescription') {
// это простое отображение, поэтому кнопка действия не должна быть видна
modalSave.classList.add('hidden');
setModalContent('camp.getDescription', button.getAttribute('data-bs-id'), '')
}
...
// еще много вариантов действий с асинхронной функцией для извлечения данных
...
})
async function setModalContent(itemTask, itemId, saveTask) {
const token = Joomla.getOptions('csrf.token', '');
let url = 'index.php?option=com_mycomponent&task=' + itemTask;
let data = new URLSearchParams();
data.append(`itemId`, itemId);
data.append(token, 1);
const options = {
method: 'POST',
body: data
}
let response = await fetch(url, options);
if (!response.ok) {
throw new Error (Joomla.Text._('COM_MYCOMPONENT_JS_ERROR_STATUS') + `${response.status}`);
} else {
let result = await response.text();
let description = document.querySelector(".modal-body");
description.innerHTML = result;
let modalSave = document.querySelector("#modal-save");
if (saveTask) {
modalSave.setAttribute('saveTask', saveTask);
modalSave.classList.remove('hidden');
} else {
modalSave.classList.add('hidden');
}
}
}Обработчик запроса содержимого модального окна на стороне сервера
Обратите внимание, что URL-адрес, установленный в javascript, вызывает компонент, контроллер и задачу. В этом случае com_mycomponent, CampController.php в папке src/Controllers и public function getDescription; Фрагмент кода:
public function getDescription() {
Session::checkToken('post') or die;
$app = Factory::getApplication();
$camp_id = $app->input->get('itemId', 0, 'int');
...
// получить данные в виде строки html
...
echo $result;
exit();
}Результат
Перевод официальной документации Joomla 4:
https://docs..org/Joomla_4_Tips_and_Tricks:_Modal_Box_Data
