Модальное окно joomla без всяких заморочек

Модальное окно joomla придает сайту красоту и профессионализм. Бесспорно это хороший инструмент, расширяющий и без того отличные возможности движка. Но вот как его создавать и какие есть для этого варианты, мы и рассмотрим в этом посте.

Содержание:

1. Создаем без плагинов
2. Подключаем плагин
3. Добавляем фреймворк 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

Примеры использования плагина можно посмотреть здесь

Скачать плагин можно на сайте разработчика

Принцип работы очень прост.

После установки плагина, в редактор 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>

Там же можно найти еще много различных компонентов для отображения информации в модальном окне.

Есть и другие, более сложные возможности сделать тоже самое, например с помощью php, jquery и пр.

Пожалуй на этом стоит остановиться. Это наиболее простые и доступные варианты не только для joomla, но и других cms.

На этом пока все.

Если статья или видео оказались для вас полезны, поделитесь с друзьями.