Модальное окно в Joomla

Что такое модальное окно?

Модальное окно – всплывающее окно, которое при появлении блокирует работу пользователя с родительским окном пока пользователь его не закроет. Если объяснять проще, представим что на сайте есть фото превью (маленькая картинка) при нажатии на которую фон затемняется, картинка разворачивается во весь размер – это и есть всплывающее модальное окно, которое в веб индустрии называют Lightbox.

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

  Если вы не знаете, то скажу что родной шаблон Aurora в Joomla 4 свёрстан на фреймворке Bootstrap 4, а шаблон Protostar в Joomla 3 свёрстан на Bootstrap 2.

Это значительно упрощает задачу реализации модального окна на сайте, так как разработчики бутстрапа уже позаботились о написании JavaScript и CSS-стилей для модальных окон.

  Поэтому чтобы добавить всплывающее окно с каким либо содержимым, нам нужно добавить в нужное место HTML-код кнопки вызывающей модальное окно, а HTML-код самого модального окна можно добавлять абсолютно в любое место.

  Для начала приведу пример модального окна. Наполнять содержимым я его не буду, главное чтобы вы поняли что это такое и как этим пользоваться.

Нажмите на кнопку с примером модального окна:

Для шаблонов на bootstrap 2

  Код для вставки модального окна во втором бутстрапе очень похож, но есть небольшие отличия. Кнопку и окно я поместил одним кодом:

Для шаблонов на bootstrap 4

HTML-код кнопки вызывающей модальное окно:

Обработчик модальных окон joomla

Чтобы на сайте заработал стандартный Lightbox Joomla, в файле index.php шаблона между тегами
<head> нужно прописать код обработчика модальных окон:

Примеры работы модальных окон средствами joomla

За работу модальных окон, реализуемых стандартными средствами Joomla, отвечает класс
modal.

Подготавливаем картинку и её уменьшенную копию (например, исходное фото размером 800X600 пикселей и его уменьшенная копия 200X150 пикселей)

В любом материале или HTML модуле используем следующий код:

/* bigfoto.png - исходное изображение, minifoto.png - уменьшенная копия */
<a class="modal" href="/images/bigfoto.png"><img src="/images/minifoto.png"></a>

Результат: увеличение картинки по клику на его превью.

Модальное окно в Joomla

Помимо картинок, через Lightbox можно вывести еще и видеоконтент, например из видеохостинга youtube.

В любом материале или HTML модуле используем следующий код:

/* {x: 560, y: 315} - ширина и высота видео в пикселях */
<a href="https://www.youtube.com/embed/hnglysjScB4"
rel="{handler: 'iframe', size: {x: 560, y: 315}}" class="modal">Посмотреть видео</a>

Результат: при нажатии на ссылку разворачивается видео youtube.

Посмотреть видео

Через Lightbox также можно вывести еще и любую страницу Вашего или же стороннего сайта.

В любом материале или HTML модуле используем следующий код:

/* {x: 800, y: 600} - ширина и высота страницы в пикселях */
<a href="https://www.joomla.org/" class="modal"
rel="{handler: 'iframe', size: {x: 800, y: 600}}">Cайт Joomla.org в Lightbox</a>

Результат: при нажатии на ссылку разворачивается страница сайта.

Cайт Joomla.org в Lightbox

Создаём модальное окно на сайте

  Ниже вы можете увидеть код модального окна, состоящий из двух частей: кнопки вызова и самого модального окна.

Вывод модуля «login» во всплывающем окне.

Разработка шаблона модуля Разработка шаблона модуля «Login»: вывод формы регистрации в SqueezeBox (Joomla 1.6/Joomla 1.7/Joomla 2.5).

SqueezeBox — стандартный для Joomla тип модального окна, использующий в качестве основной библиотеки mootools.

Для подключения SqueezeBox в шаблоне используется конструкция:

JHTML::_('behavior.modal');

, это добавит в страницы следующий JS:

window.addEvent('domready', function() { SqueezeBox.initialize({}); SqueezeBox.assign($$('a.modal'), { parse: 'rel' }); }); 

В Joomla 1.6/1.7/2.5 есть возможность создания собственных альтернативных шаблонов компонентов/модулей, и возможность выбора их в настройках, ей и воспользуемся.

  1. В папке шаблона создаем папку templates/ваш_шаблон/html/mod_login и копируем в нее шаблон модуля mod_login (/modules/mod_login/tmpl/default.php).
  2. Если на сайте кроме нашего компактного варианта будет использоваться и полный вариант формы, то создаем копию данного шаблона, назвав ее lightbox.php (имя может быть любым, за исключением default.php), в итоге в папке должно быть два файла lightbox.php и default.php, для работы нам понадобиться lightbox.php.
  3. Далее работаем с файлом lightbox.php Добавляем в начало файла (сразу после defined(‘_JEXEC’) or die; Jhtml::_(‘behavior.keepalive’);) следующий код:
    JHTML::_('behavior.modal');
     JHTML::_('stylesheet', $filename = 'style.css', $path = 'templates/ваш_шаблон/html/mod_login/' , $attribs = array() );
  4.  Создаем в папке templates/ваш_шаблон/html/mod_login файл style.css (если вы планируете проводить оптимизацию сайта, то рекомендую все стили сразу прописывать в основном файле стилей используемого шаблона, в этом случае вторую строку добавлять не следует). Первая строка кода подключит SqueezeBox, вторая добавит ссылку на файл стилей данного шаблона.

  5. Шаблон модуля «Login» состоит из двух частей: первая отвечает за вывод формы выхода, выторая за вывод формы входа, нам потребуется только вторая, находится в районе 34 строки и начинается с кода:

    <form id="login-form" action="<?php echo JRoute::_('index.php', true, $params->get('usesecure')); ?>" method="post"></form>
  6. Для вывода ссылки вывода SqueezeBox используется ссылка с указанием id стиля блока (так же указываются: класс modal и размер модального окна), в котором находится контент для вывода в модальном окне.
    <a class="modal" href="#login-form" rel="{size:{x:300,y:300}}">Форма входа</a>
  7. Заключаем всю форму входа в блок с id=«login-form».
  8. В итоге получаем следующую конструкцию:
    <a class="modal" href="#login-form" rel="{size:{x:300,y:300}}">Ссылка на html-элемент</a>
     <div id="login-form">
       <form action="<?php echo JRoute::_('index.php', true, $params->get('usesecure')); ?>" method="post" id="login-form" >
       ...
       </form>
     </div>
  9. Дописываем в файле стилей:
    #login-form { display: none }
  10. Выбор шаблона производится в настройках модуля/компонента на спойлере Дополнительные параметры, параметр — Альтернативный макет.
Похожее:  Что такое «Инвесткопилка» Тинькофф, как открыть

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

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