Рано или поздно у каждого вебмастера случается необходимость в использовании модальных окон на сайте. Назревает вопрос: можно ли реализовать модальные окна стандартными средствами Joomla, без использования сторонних расширений и скриптов? Можно и даже нужно!
Что такое модальное окно?
Модальное окно - всплывающее окно, которое при появлении блокирует работу пользователя с родительским окном пока пользователь его не закроет. Если объяснять проще, представим что на сайте есть фото превью (маленькая картинка) при нажатии на которую фон затемняется, картинка разворачивается во весь размер - это и есть всплывающее модальное окно, которое в веб индустрии называют Lightbox.
Обработчик модальных окон Joomla
Чтобы на сайте заработал стандартный Lightbox Joomla, в файле index.php шаблона между тегами
<?php JHTML::_('behavior.modal'); ?>
Примеры работы модальных окон средствами Joomla
За работу модальных окон, реализуемых стандартными средствами Joomla, отвечает класс
Подготавливаем картинку и её уменьшенную копию (например, исходное фото размером 800X600 пикселей и его уменьшенная копия 200X150 пикселей)
В любом материале или HTML модуле используем следующий код:
/* bigfoto.png - исходное изображение, minifoto.png - уменьшенная копия */ <a class="modal" href="/images/bigfoto.png"><img src="/images/minifoto.png"></a>
Результат: увеличение картинки по клику на его превью.
Помимо картинок, через Lightbox можно вывести еще и видеоконтент, например из видеохостинга youtube.
В любом материале или HTML модуле используем следующий код:
/* {x: 560, y: 315} - ширина и высота видео в пикселях */
<a href="https://www.youtube.com/embed/hnglysjScB4"
rel="{handler: 'iframe', size: {x: 560, y: 315}}" class="modal">Посмотреть видео</a>
Результат: при нажатии на ссылку разворачивается видео youtube.
Посмотреть видеоЧерез Lightbox также можно вывести еще и любую страницу Вашего или же стороннего сайта.
В любом материале или HTML модуле используем следующий код:
/* {x: 800, y: 600} - ширина и высота страницы в пикселях */
<a href="https://www.joomla.org/" class="modal"
rel="{handler: 'iframe', size: {x: 800, y: 600}}">Cайт Joomla.org в Lightbox</a>
Комментарии