Рано или поздно у каждого вебмастера случается необходимость в использовании модальных окон на сайте. Назревает вопрос: можно ли реализовать модальные окна стандартными средствами Joomla, без использования сторонних расширений и скриптов? Можно и даже нужно!

Bootstrap - 7 Урок. Всплывающие подсказки и информационные блоки

Что такое модальное окно?

Модальное окно - всплывающее окно, которое при появлении блокирует работу пользователя с родительским окном пока пользователь его не закроет. Если объяснять проще, представим что на сайте есть фото превью (маленькая картинка) при нажатии на которую фон затемняется, картинка разворачивается во весь размер - это и есть всплывающее модальное окно, которое в веб индустрии называют Lightbox.

Обработчик модальных окон Joomla

Чтобы на сайте заработал стандартный Lightbox Joomla, в файле index.php шаблона между тегами <head> нужно прописать код обработчика модальных окон:

<?php JHTML::_('behavior.modal'); ?>

Примеры работы модальных окон средствами Joomla

За работу модальных окон, реализуемых стандартными средствами Joomla, отвечает класс modal.

Фото в Lightbox Видео в Lightbox Вывод страницы в Lightbox

Подготавливаем картинку и её уменьшенную копию (например, исходное фото размером 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>

Результат: при нажатии на ссылку разворачивается страница сайта.

Cайт Joomla.org в Lightbox

Для вывода материала своего сайта, в ссылке необходимо дописать ?tmpl=component.

В результате получается ссылка: http://ilyakhasanov.ru?tmpl=component