Модальные окна на модуле JQPopup

Наверняка Вам часто на сайтах встречаются всплывающие окна, их еще называют модальными.

Часто всплывающие окна носят не столько информационный, сколько рекламный характер и сильно раздражают, привлекая к себе излишнее внимание, но в последнее время многие веб-мастеры помещают в них полезную информацию, такие как: форма подписки на сайт, заказ бонусов и многое другое.

В данной статье мы рассмотрим как сделать всплывающее окно с помощью модуля JQPopup.

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

Установка модуля JQPOPUP

Скачайте модуль JQPopup. Установите в Администраторской панели - меню Расширения - Менеджер расширений.

Настройка модуля JQPOPUP

Для настройки найти в Менеджере расширений модуль Jquery UI Popup, активировать его и произвести настройку:

1. ввести заголовок модуля 2. выбрать позицию вывода модуля (можно выбрать любую, т.к. позиция настраивается самим модулем) 3. в меню Привязка к модулю выбрать страницы, на которых должен быть вывод всплывающего банера.

Справа находятся следующие настройки:

▪ «Width» – ширина всплывающего окна в пикселях ▪ «Height» – высота всплывающего окна в пикселях ▪ «Position» – позиция всплывающего окна по оси [х, у], т.е. здесь указываются отступы слева и сверху ▪ «Time auto-close» – время автоматического закрытия всплывающего окна в миллисекундах (1000 = 1 секунда) ▪ «Time re-open» – время для открытия всплывающего окна, указывается в часах ▪ «Show Effect» – 3 эффекта появления ▪ «Hide Effect» – 7 эффектов исчезания ▪ «Theme» – выбор темы для всплывающего окна ▪ «Icon» – выбор иконки для всплывающего окна ▪ «Title» – заголовок для всплывающего окна ▪ «Type of content» – тип содержимого, показываемого во всплывающем окне: ▪ «Module» – вывод модуля во всплывающем окне, для этого нужно указать его позицию в «Module Position» ▪ «Article» – вывод статьи во всплывающем окне, указанной в «Articles», ниже идет настройка «Show Readmore», которая относится к «Articles» и обозначает: показывать «Читать далее» материал или нет ▪ «External Link» – вывод внешней ссылки указанной «External Link» ▪ «Image» – показать изображение, указанное в «Image» ▪ «Show Power by» – показывать копирайт или нет

Создание формы подписки на JQPOPUP

Форму подписки для всплывающего окна можно создать самому или воспользоваться сервисом mail-рассылок Smartresponder, Subscriebe или подобными.

Joomla 1.5 не поддерживала скрипты, и чтобы поместить форму подписки в материал, был необходим компонент, например Jumi. В Joomla 2.5, 3.0 и выше, данная проблема уже решена, код достаточно вставить в созданный модуль HTML-код.

Далее остается добавить в статью код ссылающийся на данный модуль. Как это сделать можно прочитать в этой статье Как вставить модуль в статьи сайта. Если же Вы воспользовались компонентом Jumi, то в месте вывода необходимо указать команду Jumi и номер ID модуля.

После размещения кода обновите страницу и проверьте, правильно ли выводится всплывающее окно, возможно придется отредактировать расположение и размеры.

Пример Вы можете увидеть на нашем сайте.

Установка компонента Установка компонента/плагина/модуля производится стандартным образом - см. статью Установка компонентов и плагинов в Joomla.

Дополнительная информация