Модальное окно joomla придает сайту красоту и профессионализм. Бесспорно это хороший инструмент, расширяющий и без того отличные возможности движка. Но вот как его создавать и какие есть для этого варианты, мы и рассмотрим в этом посте.
Содержание:
- Создаем без плагинов
- Подключаем плагин
- Добавляем фреймворк bootstrap
Модальное окно joomla без плагинов
Для начала следует сказать, что в свойствах материала этот вариант предусмотрен по умолчанию для вывода ссылок, в настройках «изображения и ссылки», где можно добавить три ссылки к материалу.
Кроме стандартных способов открывания: в новом окне, в родительском, во всплывающем, а так же и модально.
Если нет необходимости часто показывать контент в модальном окне, можно это сделать без плагинов, путем добавления строчки кода в индексный файл шаблона.
JHTML::_('behavior.modal');
Фанаты данного движка конечно в курсе, что все необходимые скрипты в системе идут по умолчанию в базовом комплекте. По крайней мере, в joomla 3.8.2 именно так, не говоря уже о более старых версиях.
Находятся все они в папке \media\system\js\
А данная строчка кода, именно активирует библиотеку «SqueezeBox», которая по умолчанию отключена и таким образом мы просто ее подключаем.
Этим способом хорошо добавлять видеоролики с youtube. Размер видео редактируется в фигурных скобках.
<a class="modal" rel="{handler:'iframe',size:{x:560,y:315}}">Открыть в модальном окне</a>
В результате мы видим, что к ссылкам добавляется, class=»modal» который можно редактировать в свойствах стилей.
Например, чтобы убрать белую рамку вокруг видео, необходимо отредактировать css-файл \media\system\css\modal.css
У меня это строка 27. Убрать внутренний отступ (padding:10 px;), или добавить что-то свое.
Страницу своего или стороннего сайта, системное сообщение, модуль joomla так же можно открыть в модальном окне используя следующий html-код:
<p><a href="http://starting-constructor.ru/" class="modal" rel="size:{x:840,y:550}}">Открыть сайт в модальном окне</a></p>
Меняется только ссылка и размер окна.
Модальное окно joomla с помощью плагина modals
Примеры использования плагина
https://demo.regularlabs.com/index.php/12-modals
Скачать плагин можно на сайте разработчика https://www.regularlabs.com/extensions/modals/videos#modals_downloads_free
Принцип работы очень прост.
После установки плагина, в редактор joomla добавляется дополнительная кнопка «Modal», с помощь которой можно вставить ссылку и картинку для вывода в модальном окне.
При нажатии на кнопку в редакторе, откроется окно где необходимо заполнить нужные поля, заголовок картинки и самого окна.
Есть и ручной способ, при котором подставляется нужная информация между специальными тегами {modal}ссылка на картинку{/modal}.
Разница лишь в адресе. Все что будет добавлено с вашего сайта, будет иметь относительный путь, в других случаях путь будет абсолютный.
Все остальные функции (фотогалерея, видео, статья), доступны в версии PRO
Как обойти эти ограничения я расскажу в этом видео
Модальное окно joomla с помощью bootstrap
При использовании bootstrap, необходимы некоторые условия:
шаблон joomla должен быть на бутсрапе или просто подключить этот фреймворк к своему шаблону joomla.
Достаточно скопировать код и вставить в статью в режиме html, как показано на сайте разработчика. Я немного изменил этот код на русские заголовки.
<!-- Button trigger modal -->
<p><button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">Открыть модально </button></p>
<!-- Modal -->
<div class="modal fade" id="exampleModal" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" tabindex="-1">
<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="Close"> <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> Подробнее ...
