Модальное окно Modal Joomla 4

В joomla-4 по умолчанию используется модальный JavaScript плагин Bootstrap для добавления диалоговых окон на сайт для лайтбоксов, уведомлений пользователей или полностью настраиваемого контента.

  • Модальные окна сделаны на HTML, CSS и JavaScript. Они располагаются поверх всего документа и блокируют прокрутку тела документа <body>, вместо него прокручивая модальные окна.
  • Клик вне модального элемента автоматически закрывает его.
  • Bootstrap позволяет активировать лишь один модальный элемент за раз. Вложенные модальные элементы не поддерживаются.
  • По умолчанию модальное окно располагается вверху страницы. Для центровки добавляется дополнительный класс class="modal-dialog-centered"
  • Для увеличения размера также добавляются различные классы.
  • Полная инструкция по Modal Bootstrap
  • Для работы модального окна нужно вызвать скрипт на данной странице.
  • Для подключения Bootstrap компонентов скачать модуль и плагин на этой странице
  • Для вызова скрипта на странице внизу добавляется тэг в фигурных скобках { bscompos modal carousel } или { bscompos modal } (отступы слева и справа убрать). В плагине указано как его использовать, при публикации его не будет видно.

Модальное окно 1 картинка

image_1


В модальном окне 2 колонки: "Картинка + текст"

image_1

Modal_Title_1

image_2

Modal_Title_2

image_3

Modal_Title_3

image_4

Modal_Title_4


Карусель в модальном окне (Modal with Carousel)


Форма в модальном окне


На странице приведены основные примеры использования модального окна. В архив для скачивания добавил 4 файла-шаблона и небольшой файл стиль css (стиль при наведении на картинку). Устанавливайте, пользуйтесь, экспериментируйте. Пишите отзывы. Делитесь своими способами использования Modal.

💬 2 комментария

  1. Суббота, 23 октября 2021 00:47

    Спасибо автору, красивые примеры. Только у вас ошибочка - не Карусель, а Слайдер в модальном окне. А как сделать карусель, чтобы было 3-4 картинки в ряд? хотелось бы эти примеры скачать.

    1. Суббота, 23 октября 2021 14:56

      Спасибо за отзыв HAPPYNESS. Стараюсь, чтобы пользователям было легче разобраться в функционале joomla.

      С каруселью сейчас не подскажу, надо залезть в код компонента. В стандартных настройках Bootstrap-5 сейчас только такая модель - слайдер. Если получится поставить картинки в ряд - сразу опубликую.

      Upd 2021-10-29: Во всплывающем окне может быть только один объект. Если вы имеете ввиду "карусель товаров", то такое делается в компоненте Слайдер. Скоро опубликую статью с примерами.