Всплывающее окно joomla

Всплывающее окно joomla

От автора: приветствую Вас уважаемые читатели. Цель любого сайта – это прежде всего посетители и чем больше, тем лучше. При этом когда посетитель зашел на страницу Вашего сайта, его нужно чем то привлечь, дабы удержать и подтолкнуть до выполнения определенного действия, к примеру подписка, покупка и т.д. Поэтому в данной статье мы поговорим о том, как создать всплывающее окно joomla, потому как элементы подобного вида, очень хорошо зарекомендовали себя на практике, то есть наилучшим образом привлекают внимание посетителя.

Хотел бы отметить, что в данной статье мы будем обсуждать технические моменты создания всплывающего окна Joomla 3, то есть, то как реализовать данный функционал. При этом мы не будем останавливаться на том, какой контент необходимо отображать, дабы наилучшим образом привлечь внимание посетителя, так как это совсем другая область. Всплывающее окно joomla 3, мы с Вами реализуем при помощи функционального плагина Simple PopUp.

Кликнув по кнопке “Download” нас перенаправят на страницу разработчика плагина.

В правом сайдбаре выбираем необходимую версию CMS и кликаем по соответствующей ссылке для скачивания расширения. Далее, устанавливаем стандартным способом, используя менеджер расширений Joomla.

После установки переходим в менеджер плагинов, для активации и настройки расширения.

Страница описания плагина, разделена на две вкладки, каждая из которых содержит различные настройки. Вкладка “Плагин”, содержит настройки, отвечающие за внешний вид всплывающего окна:

Align text – расположение текста (слева, по центру, справа);

Pop-up box width (in pixels) – ширина всплывающего окна;

Pop-up box height (in pixels) – высота всплывающего окна;

Use cookie (to only show once) – использовать ли куки, для хранения информации, о том что пользователь уже просмотрел контент модального окна joomla;

Box style – оформление всплывающего окна;

‘Image # of #’ – формат отображения номера и количества изображений;

‘CLOSE’ – надпись на кнопке “Закрыть”;

Show label ‘Image # of #’ – показывать ли номер и количество оставшихся изображений;

Hide download options in PDF viewer – скрывать опции скачивания при просмотре документа PDF.

На вкладке “Дополнительные параметры” приведены настройки, которые необходимы для корректной работы плагина, то есть как подключать библиотеку JQuery, какую версию использовать, включить ли режим отладки и т.д.

После настройки не забываем опубликовать плагин и сохраняем изменения. Для работы плагина необходимо прописать специальный код, при формирования контента необходимой страницы. В качестве контента мы используем стандартный материал Joomla, а значит переходим в “Менеджер материалов” и открываем для редактирования произвольный материал.

Всплывающее модальное окно joomla 3 будет отображать контент, заключенный между специальными тегами:

{simplepopup} 
{/simplepopup}

А значит, давайте отобразим в качестве контента небольшое изображение и строку текста:

{simplepopup} <img src="images/powered_by.png" alt="" width="150" height="45" /></p>
<div>Всплывающее окно Joomla</div>
{/simplepopup} 

Сохраняем материал и переходим в пользовательскую часть для тестирования.

Теперь Вы знаете, как в joomla как сделать всплывающее окно отображающее произвольный контент. Оформление модального окна Вы можете сменить в настройках, используя параметр Box style, к примеру, выберем FancyBox.

Как Вы видите расширение достаточно интересное и функциональное, поэтому если оно Вас заинтересовало, используйте его в своих наработках. Более подробная информация приведена в официальной документации, которую Вы сможете найти по ссылке.

На этом данная статья завершена. Всего Вам доброго и удачного кодирования!!!

Хотите узнать, как создать собственный шаблон на CMS Joomla с нуля

Все очень просто!

Получите бесплатную пошаговую авторскую систему, которая научит Вас с полного нуля создавать уникальные шаблоны на движке Joomla – с неповторимым дизайном

Получить

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree