В joomla-4 по умолчанию используется модальный JavaScript плагин Bootstrap для добавления диалоговых окон на сайт для лайтбоксов, уведомлений пользователей или полностью настраиваемого контента.
- Модальные окна сделаны на HTML, CSS и JavaScript. Они располагаются поверх всего документа и блокируют прокрутку тела документа
<body>, вместо него прокручивая модальные окна. - Клик вне модального элемента автоматически закрывает его.
- Bootstrap позволяет активировать лишь один модальный элемент за раз. Вложенные модальные элементы не поддерживаются.
- По умолчанию модальное окно располагается вверху страницы. Для центровки добавляется дополнительный класс
class="modal-dialog-centered" - Для увеличения размера также добавляются различные классы.
- Полная инструкция по Modal Bootstrap
- Для работы модального окна нужно вызвать скрипт на данной странице.
- Для подключения Bootstrap компонентов скачать модуль и плагин на этой странице
- Для вызова скрипта на странице внизу добавляется тэг в фигурных скобках { bscompos modal carousel } или { bscompos modal } (отступы слева и справа убрать). В плагине указано как его использовать, при публикации его не будет видно.
Модальное окно 1 картинка
В модальном окне 2 колонки: "Картинка + текст"
Modal_Title_1
Modal_Title_2
Modal_Title_3
Modal_Title_4
Карусель в модальном окне (Modal with Carousel)
Форма в модальном окне
На странице приведены основные примеры использования модального окна. В архив для скачивания добавил 4 файла-шаблона и небольшой файл стиль css (стиль при наведении на картинку). Устанавливайте, пользуйтесь, экспериментируйте. Пишите отзывы. Делитесь своими способами использования Modal.