Модальное окно 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, как показано на сайте разработчика. Я немного изменил этот код на русские заголовки.
Мы используем куки для наилучшего представления нашего сайта. Если Вы продолжите использовать сайт, мы будем считать что Вас это устраивает.СогласенНе согласенЧитать подробнее
Нафига писать если нельзя скопировать пример…
Что так секретно чтоли ???
Вы попали не в тот момент. Тестировался инструмент для защиты контента. Сейчас все работает.
Спасибо автору. Чётко и профессионально. Уважаю
Да, спасибо за подсказку.
Скобка пропущена открывающая: rel=»size:{x:840,y:550}}
Почему окно (файл html с iframe) открывается пустым?
Если открою в новом окне — все гуд.
Просто супер!
Забацал себе окошко через JHTML::_(‘behavior.modal’);
До этого неск. дней голову ломал — как сделать без привлечения сторонних плагинов.
Почему отображает не подключается другой css шаблона custom только template