Рейтинг:  5 / 5

Звезда активнаЗвезда активнаЗвезда активнаЗвезда активнаЗвезда активна
 

вывод модуля во всплывающем окне joomla 3

Довольно интересная и полезная функция. Экономит место на сайте и делает его оригинальнее и практичнее.

Функция простая в реализации и можно сделать на любом сайте. Всего за 3 шага.

В частности можно использовать для вывода модулей: отправка заявки и заказ обратного звонка

Вот пример реализации: zenklining.ru

Шаг 0.

Нужно создать/установить новый модуль, который будет выводиться во всплывающем окне.
И назначить для него какую то свою пользовательскую позицию, которой нет в вашем шаблоне.
Например, под названием: modal

Шаг 1.

Переходим в исходный код шаблона (обычно это файл index.php) и в конце (можно прямо перед  закрывающим /body) добавляем такой код: 

<div id="ModalOpen" class="Window">
<div><a href="#close" title="Закрыть" class="close">X</a>
<jdoc:include type="modules" name="modal" style="none" />
</div>
</div>

Поясню, что к чему.

Здесь основной блок #ModalOpen (называть можно как угодно, id нужен для его вызова) с классом .Window (класс менять нельзя)

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

Шаг 2.

После этого сразу же идём в основной CSS файл шаблона и в самом конце указываем такие стили:

 

/* Стили для модальных окон */

.Window {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.7);
z-index: 99999;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
display: none;
pointer-events: none;
}

.Window:target {
display: block;
pointer-events: auto;
}

.Window > div {
width: 360px;
position: relative;
margin: 10% auto;
padding: 30px 10px 10px;
border-radius: 10px;
background: #fff;
box-shadow: 0px 0px 20px 2px;
text-align:center;
}
.close {
background: #cc3300;
color: #FFFFFF;
line-height: 25px;
position: absolute;
right: -12px;
text-align: center;
top: -10px;
width: 24px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}

.close:hover { background: #990000; }

Стили можно изменять под свой дизайн.

Шаг 3.

Всё, после этого можно добавлять ссылки на открытие этих модулей во всплывающем окне.

Ссылка будет выглядеть таким образом: 

<a href="#ModalOpen">Дать заявку</a>

 

Можно создавать несколько таких окон с разными id и позициями, и вызывать их разными ссылками.

Удачного внедрения!

 

Скачать эту инструкцию к себе >>

 

С уважением, Олег Касьянов.

X

Инструкция по планированию сайта
С чего начать создание сайта?

Инструкция по созданию сайта

  • Инструкция по созданию сайта
  • Шаблон для составления плана сайта
  • Чек-лист по этапам создания сайта

* Никакого спама. Гарантирую!