MIDAV.RU

MIDAV.RU

Учусь делать сайты в свободное время .

Вывод модуля в модальном окне в Joomla 3

Просмотров: 5127Комментарии: 0
Joomla
Вывод модуля в модальном окне в Joomla 3

В этой статье мы рассмотрим как вывести модуль Joomla в модальном окне , при помощи библиотеки Mootools и установленого по умолчанию в системе Lightbox плагина SqueezeBox. Для реализации этой задачи можно применить два способа . Первый способ - это создать отдельный файл шаблона , для вывода позиции модулей . Второй способ , если нужно вывести в модальное окно какой то определённый модуль , например форму входа , изменить шаблон вывода самого модуля .

Итак первый способ . В папке своего шаблона создадим файл module_modalbox.php , с таким кодом :

input;
$moduleposition = $input->getCmd('moduleposition','module-modal'); // получаем из адресной строки название позиции модуля, если не указано присваивается позиция по умолчанию module-modal
$modulestyle = $input->getCmd('modulestyle','xhtml'); // получаем стиль вывода модуля
?>

Код очень простой и короткий . Получаем из адресной строки значения позиции и стиля вывода модуля . И потом выводим эту позицию стандартным способом . Файл универсальный , с его помощью можно вывести любую позицию , надо только указать её в адресе ссылки . Например /index.php?tmpl=module_modalbox&moduleposition=myposition&modulestyle=none

Теперь надо в шаблоне подключить плагин для вывода модального окна и в нужном месте вставить ссылку на наш созданый файл . Я все эксперименты провожу на дефолтном шаблоне Protostar smile В главном файле шаблона index.php подключаем плагин и в нужном месте вставляем ссылку для вывода модуля . В начале файла подключаем плагин SqueezeBox :

И потом в нужном месте вставляем ссылку :

Module in modalbox

Чтобы плагин обработал ссылку , ей должен быть присвоен класс modal . В строке href указываем ссылку на наш файл в понятном для Joomla формате /index.php?tmpl=module_modalbox&moduleposition=module-modal&modulestyle=none . В атрибуте rel можно указать опции для плагина , напримеводимого окна rel="{size:{x:200,y:200}} . Подробнее про опции плагина SqueezeBox можно почитать на странице разработчика . Теперь осталось задать нашему модулю нужную позицию , по умолчанию это позиция module-modal и всё .

Если всё сделано правильно , то при нажатии на ссылку мы увидим наш модуль в модальном окне .

module-in-modalbox.jpg

Только нужно помнить , что этот способ выведет все модули , опубликованые в данной позиции . Поэтому нужно задавать для каждого модуля свою позицию и указывать её в ссылке на файл .

Если необходимо вывести в модальное окно какой-то определённый модуль , например форму входа , тогда можно изменить шаблон именно этого модуля . Переопределим в своём шаблоне вывод модуля и уже там будем вносить свои изменения . Если не хотите портить дефолтный файл , можно создать собственный альтернативный шаблон , Joomla это позволяет . Только не забудте потом выбрать этот альтернативный шаблон в настройках модуля

Итак создадим для формы входа альтернативный шаблон для вывода в модальном окне . В папке шаблона html/mod_login создадим два файла : modal.php и modal_logout.php , взяв за основу стандартные файлы модуля default.php и default_logout.php из папки modules/mod_login/tmpl . В файле modal_logout.php ничего менять не надо . А вот с файлом modal.php будем работать . Подключим в файле плагин лайтбокса известным способом . Добавим ссылку с классом modal . И обрамим форму входа дивом и идентификатором . Этому диву надо присвоить свойство CSS display:none; . Сделать это можно прямо в коде , или добавить свойство в CSS файл шаблона . Этот вариант лучше , я так и сделал . Код файла modal.php :


Войти
... тут содержимое формы , в нём ничего менять не надо

Результат :

loginform-in-modalbox.jpg

Таким образом в Joomla можно выводить в модальном окне различные модули с помощью Mootools плагина SqueezeBox . Но поскольку разработчики Joomla постепенно отходят от использования Mootools и переходят на jQuery , в следующей статье мы рассмотрим как эту задачу реализовать с помощью jQuery .

Оставьте комментарий!

grin LOL cheese smile wink smirk rolleyes confused surprised big surprise tongue laugh tongue rolleye tongue wink raspberry blank stare long face ohh grrr gulp oh oh downer red face sick shut eye hmmm mad angry zipper kiss shock cool smile cool smirk cool grin cool hmm cool mad cool cheese vampire snake excaim question


Используйте нормальные имена. Ваш комментарий будет опубликован после проверки.

     

  

Если вы уже зарегистрированы как комментатор или хотите зарегистрироваться, укажите пароль и свой действующий email. При регистрации на указанный адрес придет письмо со ссылкой на ваш персональный аккаунт, где вы сможете изменить свои данные, включая адрес сайта, ник, описание, контакты и т.д., а также подписку на новые комментарии.

(обязательно)