SLogin - всплывающая форма авторизации.

Часто спрашивают можно ли стандартные поля формы входа Joomla вывести во всплывающем окне, ответ — да, можно, но для этого потребуется сделать ряд доработок. Для модификации используем шаблон вывода — compact.php

Для вывода формы авторизации в lightbox применяем тот же принцип, что и в статье — Вывод модуля «Login» во всплывающем окне, т.е. для вывода используем mootools.

Начнем с того, что добавим ссылку, активирующую вызов lightbox:

<a class="modal" href="#joomla-login-form" rel="{size:{x:300,y:250}}"><span class="joomlaslogin">&nbsp;</span></a>

<div id="slogin-buttons" class="slogin-buttons <?php echo $moduleclass_sfx?>">
  <?php if (count($plugins)): ?>
    <?php foreach($plugins as $link): ?>
      <a href="<?php echo JRoute::_($link['link']);?>" class="sl_boxed"><span class="<?php echo $link['class'];?>">&nbsp;</span></a>
    <?php endforeach; ?>
  <?php endif; ?>
  <a class="modal" href="#joomla-login-form" rel="{size:{x:300,y:250}}"><span class="joomlaslogin">&nbsp;</span></a>
</div>

Т.к. скрипт открытия окон авторизации привязан к тегу <a>, то при клике на кнопку вызова бокса будет открываться и сайт, чтобы этого не происходило добавляем к тегу вызова окон авторизации класс sl_boxed, к которому и будет обращаться скрипт.

Теперь нам требуется доработать скрипт открытия окон авторизации — mod_slogin/media/slogin.js , заменив обращение по имени тега, на обращение по классу (строка 6):

var elements = block.getElementsByClassName('sl_boxed');

Далее оборачиваем форуму авторизации в блок вывода lightbox и добавляем вызов плагина:

<?php if ($params->get('show_login_form')): ?>
<?php JHTML::_('behavior.modal'); ?>
<div id="joomla-login-form">
  <form action="<?php echo JRoute::_('index.php', true, $params->get('usesecure')); ?>" method="post" id="login-form" >
    ...
  </form>
</div>
<?php endif; ?>

Дорабатываем css (mod_slogin/tmpl/compact/slogin.css):

#joomla-login-form { display: none } /* скрываем блок с формой входа */
.slogin-buttons .joomlaslogin { background-position: -203px 0; }  /* указываем смещение для фона с пиктограммами *

Остается доработать внешний вид формы и нарисовать иконку.

В качестве образца прикрепляю архив с работающим модулем.

mod_slogin


1 комментарий
Сенкс :-) наверное это стоит добавить в FAQ
Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.