Рейтинг:  0 / 5

Звезда не активнаЗвезда не активнаЗвезда не активнаЗвезда не активнаЗвезда не активна
 
Авторизация во всплывающем окне

Всем привет! При очередном обновлении и улучшении одного и своих сайтов задалась целью оптимизировать форум. Тут появилось задание: уменьшить объёмную стандартную авторизацию Joomla 2.5, положив форму авторизации во всплывающее окно, а вызывалось оно чтобы обычной текстовой ссылкой.


Мне кажется, что авторизация в модальном окне — это и красиво, и практично, ведь вызывается оно только при необходимости, а ссылка модуля занимает совсем немного места и её можно расположить абсолютно в любом месте сайта, подойдёт для любого дизайна. Экономия пространства очень важна при оптимизации сайта.

Вход на сайт во всплывающем окне

Сторонние расширения и различные модули грузят сайт, к тому же, не всегда можно разобраться в них и правильно настроить, поэтому решено было сделать авторизацию в модальном окне с помощью встроенных библиотек Joomla 2.5. С помощью великого Интернета и Гугла (нескольких блогов и форумов) у меня получилось то, что я планировала сделать, поэтому пока не забыла, выкладываю в этой статье подробный отчёт создания формы входа в Джумле версии 2.5 во всплывающем окне, которое вызывается при клике на ссылку.

Авторизация в Joomla 2.5

Итак, делаем красивую и удобную форму авторизации на Joomla 2.5. Сама кнопочка «ВХОД» или «АВТОРИЗАЦИЯ» должна быть в виде текстовой ссылки, при клике на которую появляется всплывающее окно авторизации — форма входа. Вспомогательные (дополнительные ссылки) в этой форме («Забыли пароль?», «Регистрация», «Ещё нет учётной записи?») ведут на стандартные страницы Джумлы.


  1. В папке вашего (используемого на сайте) шаблона создаём папку mod_login (полный путь к созданной папке: templates/ваш_шаблон/html/mod_login), в неё нужно скопировать файл шаблона стандартного модуля авторизации default.php (полный путь к нему: /modules/mod_login/tmpl/default.php).
  2. Создаём в новой папке внутри вашего шаблона файл style.css и прописываем в нём первый класс:
    #login-form { display: none }
  3. Затем в файле index.php вашего шаблона в самом конце добавляем две строчки:
    <?php JHTML::_('behavior.modal');
     JHTML::_('stylesheet', $filename = 'style.css', $path = 'templates/beez5/html/mod_login/' , $attribs = array() );?>
  4. В файле default.php (/modules/mod_login/tmpl/default.php) ищем строку:
    <form action="<?php echo JRoute::_('index.php', true, $params->get('usesecure')); ?>" method="post" id="login-form" >
    и перед этой строчкой вставляем следующие строки:
    <a class="modal" href="#login-form" rel="{size:{x:300,y:300}}">Ссылка на html-элемент</a>
     <div id="login-form">
  5. После заключительного тега
    </form>
    в конце файла ставим закрывающийся тег
    </div>
  6. Создаём новый модуль в Расширения — Менеджер модулей — Создать — HTML-код и вставляем при отключённом визуальном редакторе следующий код:
    <p style="display: inline!important;"><a class="modal" href="/component/users/?view=login&tmpl=component&Itemid=120" rel="{size:{x:300,y:300}}">Авторизация на сайте</a><img src="/images/stories/key3.png" width="126px" height="82px" title="Авторизация на сайте" alt="Авторизация на сайте" /></p>

И вот таким нехитрым способом мы получаем форму авторизации во всплывающем окне при клике на ссылку в модуле, при чём создали мы такое вот модальное окно стандартными возможностями Joomla 2.5. Ура! Получилось то, что было запланировано изначально!