Что такое модальное окно?
Модальное окно – всплывающее окно, которое при появлении блокирует работу пользователя с родительским окном пока пользователь его не закроет. Если объяснять проще, представим что на сайте есть фото превью (маленькая картинка) при нажатии на которую фон затемняется, картинка разворачивается во весь размер – это и есть всплывающее модальное окно, которое в веб индустрии называют 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>
Результат: увеличение картинки по клику на его превью.
Помимо картинок, через 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 есть возможность создания собственных альтернативных шаблонов компонентов/модулей, и возможность выбора их в настройках, ей и воспользуемся.
- В папке шаблона создаем папку templates/ваш_шаблон/html/mod_login и копируем в нее шаблон модуля mod_login (/modules/mod_login/tmpl/default.php).
- Если на сайте кроме нашего компактного варианта будет использоваться и полный вариант формы, то создаем копию данного шаблона, назвав ее lightbox.php (имя может быть любым, за исключением default.php), в итоге в папке должно быть два файла lightbox.php и default.php, для работы нам понадобиться lightbox.php.
- Далее работаем с файлом lightbox.php Добавляем в начало файла (сразу после defined(‘_JEXEC’) or die; Jhtml::_(‘behavior.keepalive’);) следующий код:
JHTML::_('behavior.modal'); JHTML::_('stylesheet', $filename = 'style.css', $path = 'templates/ваш_шаблон/html/mod_login/' , $attribs = array() );
Шаблон модуля «Login» состоит из двух частей: первая отвечает за вывод формы выхода, выторая за вывод формы входа, нам потребуется только вторая, находится в районе 34 строки и начинается с кода:
<form id="login-form" action="<?php echo JRoute::_('index.php', true, $params->get('usesecure')); ?>" method="post"></form>
- Для вывода ссылки вывода SqueezeBox используется ссылка с указанием id стиля блока (так же указываются: класс modal и размер модального окна), в котором находится контент для вывода в модальном окне.
<a class="modal" href="#login-form" rel="{size:{x:300,y:300}}">Форма входа</a>
- Заключаем всю форму входа в блок с id=«login-form».
- В итоге получаем следующую конструкцию:
<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>
- Дописываем в файле стилей:
#login-form { display: none }
- Выбор шаблона производится в настройках модуля/компонента на спойлере Дополнительные параметры, параметр — Альтернативный макет.
Создаем в папке templates/ваш_шаблон/html/mod_login файл style.css (если вы планируете проводить оптимизацию сайта, то рекомендую все стили сразу прописывать в основном файле стилей используемого шаблона, в этом случае вторую строку добавлять не следует). Первая строка кода подключит SqueezeBox, вторая добавит ссылку на файл стилей данного шаблона.