
Как создать модальное окно в Joomla
Знаете ли вы, что в шаблонах Joomla свёрстаных на Bootstrap есть возможность встраивать и добавлять в любое место сайта всплывающие окна? Делается это очень просто, так как в шаблоне уже прописаны нужные для этого JavaScript и CSS, а вам всего лишь необходимо добавить в нужное место кнопку вызова всплывающего окна и макет окна. Ни каких дополнительных расширений - всё просто!
Всплывающее окно в Joomla
Если вы не знаете, то скажу что родной шаблон Aurora в Joomla 4 свёрстан на фреймворке Bootstrap 4, а шаблон Protostar в Joomla 3 свёрстан на Bootstrap 2.
Это значительно упрощает задачу реализации модального окна на сайте, так как разработчики бутстрапа уже позаботились о написании JavaScript и CSS-стилей для модальных окон.
Поэтому чтобы добавить всплывающее окно с каким либо содержимым, нам нужно добавить в нужное место HTML-код кнопки вызывающей модальное окно, а HTML-код самого модального окна можно добавлять абсолютно в любое место.
Для начала приведу пример модального окна. Наполнять содержимым я его не буду, главное чтобы вы поняли что это такое и как этим пользоваться.
Нажмите на кнопку с примером модального окна:
Создаём модальное окно на сайте
Ниже вы можете увидеть код модального окна, состоящий из двух частей: кнопки вызова и самого модального окна.
Для шаблонов на Bootstrap 4
HTML-код кнопки вызывающей модальное окно:
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Запустить модальное окно
</button>
HTML-код модального окна:
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Заголовок окна</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Закрыть">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Содержимое...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Закрыть</button>
<button type="button" class="btn btn-primary">Сохранить изменения</button>
</div>
</div>
</div>
</div>
У кнопки есть атрибут data-target="#"
, а у модального окна есть айдишник id=""
. Каждый из них находятся в первой строчке кода своего элемента.
Нужно задать уникальное название для id
модального окна и это название указать в атрибуте data-target
кнопки, поставив в его начало символ #
. Именно по этому значению кнопка находит модальное окно и открывает его.
Для шаблонов на Bootstrap 2
Код для вставки модального окна во втором бутстрапе очень похож, но есть небольшие отличия. Кнопку и окно я поместил одним кодом:
<!-- Кнопка модального окна -->
<p><a href="#myModal" role="button" class="btn" data-toggle="modal">Открыть модальное окно</a></p>
<!-- Окно -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Заголовок окна</h3>
</div>
<div class="modal-body">
<p>Содержимое или текст модального окна…</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Закрыть</button>
<button class="btn btn-primary">Сохранить</button>
</div>
</div>
А теперь несколько моментов:
- Чтобы вставить код, переключите редактор в режим html
- Вы можете убрать из окна ненужные вам элементы: кнопки, шапку окна и т.д.
- В содержимом вы можете вставить всё что угодно: текст с картинками и видео, модули и т.д.
- Можно изменять стили модального окна (размер, позицию, цветность) через CSS. Для этого нужно добавить в div окна
style=" "
, где прописать нужные стили;
Я надеюсь что по html макету модального окна вам понятно что где находится и вы сможете без проблем отредактировать окно под свои нужды.
Если же у вас возникли проблемы, то пишите о них в комментариях ниже.
*** Авторизируйтесь чтобы писать комментарии.