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

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

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

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

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

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

    

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

 

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

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

 

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

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

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

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

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

     «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

 

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

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

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

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

 

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

 

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

 

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

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

 

     Установка компонента     

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


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

  Версия Joomla:
  Версия: 1.0.10
  Лицензия: GNU / GPL v2
  Тип расширения: модуль   Joomla
  Язык: русский / английский
  Пример: http://vsmart-extensions.com
  Размер: 508 кб