Создание модальных окон с эффектом lightbox в Joomla

В современном вебдизайне часто используются модальные окна для вывода части контента или сообщения на странице. И в этом небольшом уроке я покажу вам как легко и просто создавать подобные окна в Joomla.

Для этого мы собираемся использовать бесплатное расширение Modals.

 

Это расширение будет работать в Joomla 2.5 и 3.

Установите расширение Modals

Вы можете найти плагин Modals в каталоге расширений на официальном сайте Joomla!.

Перейдите в вашей Админке в меню Расширения -> Менеджер расширений -> Установить

После установки плагина он автоматически активируется и полностью готов к использованию!

Использование тега {modal}

Используя теги {modal} {/modal} вы можете создавать модальные окна с необходимым вам контентом. Вы можете также использовать имя класса  "modal", чтобы создать лайтбокс-эффект.

Вот пример того, как добавить видео с Youtube на свой сайт, чтобы оно открывалось во всплывающем окне:

{modal http://www.youtube.com/embed/tENZDoj5MTg|width=560|height=315|title=Заголовок видео!}Видео с Youtube{/modal}

Чтобы проверить работу плагина нажмите на ссылку "Видео с Youtube"!

Пример 1

Чтобы посмотреть всевозможные примеры с сайта NoNumbers, перейдите по этой ссылке.

Давайте, попробуем еще один пример, как добавить этот эффект для отдельного пункта меню.

Создайте меню

Создайте пункт меню и просто добавьте теги {modal}{/modal} вокруг текста ссылки.

Меню в модальном окне

Теперь при открытии этой странице она появится во всплывающем окне, как показано ниже..

Страница в модальном окне Joomla


Перевод урока с ostraining.com