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