Опубликовано автор в категориях Joomla.

modal_login_window

Буквально недавно, один мой знакомы в аське спросил у меня, не знаю ли я какого-нибудь «прикольного» модуля логина для Joomla! 1.5. В принципе, подобных модулей существует великое множество, а если вы нормально разбираетесь в CSS и умеете немного рисовать, то можете красиво оформить и стандартный модуль логина. Однако, зачастую модуль логина занимает много полезного пространства на сайте и отвлекает внимание пользователей. Часто многие прячут его за ссылкой регистрации. Мне лично уже несколько раз приходилось прятать по просьбе клиента модуль логина в слайдер. Одним из решений красивой реализации логина в Joomla! 1.5 является использование всплывающего модального окна, которое можно реализовать на базе уже имеющихся функций ядра Joomla! в сочетании с библиотекой Mootools.

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

В этой статье мы будем использовать два простых способа переписывания разметки для модуля логина и страницы входа в com_user. Для начала скопируем родной шаблон в паку переписывания разметки активного шаблона сайта:

копируем:

/modules/mod_login/tmpl/default.php

в:

/templates/template_name/html/mod_login/default.php

и копируем:

/components/com_user/views/login/tmpl/default_login.php

в:

/templates/template_name/html/com_user/login/default_login.php

Где template_name это название папки шаблона по умолчанию используемого на вашем сайте. Если вы используете более одного шаблона, которые связаны с пунктами меню, то вам нужно будет создать макеты переписывания разметки для каждого шаблона.

Сначала откройте файл переписывания разметки для модуля логина /html/mod_login/default.php и замените его содержимое на код из листинга ниже:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!--?php // no direct access defined('_JEXEC') or die('Restricted access'); ?-->
 
<!--?php if ($type == 'logout') : ?-->
<form id="form-login" action="index.php" method="post" name="login"><!--?php if ($params-&gt;get('greeting')) : ?-->
<div></div>
<!--?php endif; ?-->
<div align="center"><input class="button" name="Submit" type="submit" value="&lt;?php echo JText::_( 'BUTTON_LOGOUT'); ?&gt;" /></div>
<input name="option" type="hidden" value="com_user" /> <input name="task" type="hidden" value="logout" /> <input name="return" type="hidden" value="&lt;?php echo $return; ?&gt;" />
 
</form><!--?php else : JHtml::_('behavior.modal', 'a.login'); ?--><script type="text/javascript">// <![CDATA[
window.addEvent('domready', function() {
    // Decorate the login windows to use a modal.
    $ES('a.login').each(function(a){
        a.setProperty('rel', '{size: {x: 175, y: 225}, ajaxOptions: {method: "get"}}');
        if (a.getProperty('href').contains('?')) {
            a.setProperty('href', a.getProperty('href')+'&tmpl=component');
        } else {
            a.setProperty('href', a.getProperty('href')+'?tmpl=component');
        }
    });
});
// ]]></script>
 
<!--?php echo JText::_('LOGIN') ?--><!--?php echo JText::_('REGISTER'); ?-->

Для зарегистрированного пользователя вид модуля не изменится. Но когда он не вошел в систему, то он увидит только две ссылки: «Войти» и «Зарегистрироваться». Для ссылки «Войти» был использован класс «login». Небольшой простой Javascript был использован для реализации возможности добавления модального всплывающего окна для любой ссылки с классом «login». Этот метод будет работать корректно в том случае, если Javascript включен, если нет, то нажав на ссылку, пользователь будет отправлен на обычную страницу входа.

Перед тем как мы начнем работу, модуль логниа будет иметь подобный вид.

layout_overrides_normal_login_module

После того, как мы сделали переписывание разметки, для не вошедшего пользователя модуль будет иметь подобный вид:

layout_overrides_login_module

Когда вы кликните на ссылку логина, то форма входа будет открыта в модальном всплывающем окне. Но вместе с формой будет выводится и описание, которое есть на странице логина компонента com_user. Это можно исправить.

Для начала откройте файл переписывания разметки /html/com_user/login/default_login.php. Там, где выводится описание логина (в районе 23 строки), «оберните» его в условие «if», для вывода только в модальном окне:

Переменная tmpl в Joomla предназначена для работы с шаблонами. Если мы используем значение !="component", то мы знаем, что в данном случае контент не будет отображаться в фронтенде (шаблоне) сайта.

Окончательный результат будет выглядеть следующим образом после того, как мы нажмем на ссылку «Войти»:

layout_overrides_login_popup

Вот, в принципе, и все, что нужно чтобы вывести форму логина в модальном всплывающем окне. Вы можете скачать файлы примеров из этой статьи с joomlacode.org: popup_login_box_layout_overrides.zip. Чтобы установить их, распакуйте файлы в /html/ папку используемого по умолчанию шаблона Joomla!. И не забудьте сделать резервные копии оригинальных файлов.

66 комментариев к записи “Вывод формы логина в Joomla! 1.5 в красивом всплывающем окне”

  1. Hiway

    Метод основан на использовании стандартного модального окна Joomla!, которое работает во всех современных браузерах.

    Ответить
    • андрей

      Здравствуйте! Модуль очень хорош! Установил в два шаблона. Но в одном отображение как-то совсем неправильное, т.е. совсем не просвечивается окно страницы, с которой был произведен старт модуля и при закрытии последнего отображается только фон ( ни контента, ни другого наполнения страницы не видно). В другом шаблоне отображение абсолютно правильное и в отличие от первого папку html в нем я создавал сам, т.к. ее просто там не было. Как мне исправить ситуацию с правильным отображением в первом шаблоне? Большое Вам спасибо! И если что не понятно написал, извините, я — новичок.

      Ответить
  2. Илья

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

    Ответить
    • Hiway

      Илья, Я лично использовал этот метод. Проверял при создании поста. Внимательно посмотрите все пункты.

      Ответить
  3. Илья

    На локальной машинке сейчас попробовал, все вери гуд :). Видимо я что до намудрил в шаблоне или более того в стилях самого модуля и компоненты )). Учуся.. Спасибо!

    Ответить
  4. Илья

    Дело в самом шаблоне. Я его сам делал, с помощью плагина для DW JT3.1
    Может мне в шаблон как-то нужно подключить это стандартное модальное окно?

    Ответить
    • hiway

      Нет, вам стоит просто внимательно посмотреть код. Тем более, если работает нормально на локальной машине. А вы делали оверрайды для шаблона. Скачивали архив с файлами в конце статьи?

      Ответить
      • Илья

        Архив скачивал, делал с ним.
        На локальной я на другом шаблоне попробовал, работает. Потом попробовал на сервере, загрузил в другой шаблон, задефолтил его — работает. А на моем шаблон не работает 🙁

        Ответить
        • Илья

          Проблема решена!
          Все дело в том, что я делал шаблон с помощью расширения для DW — Joomla Template Kit 3.1, там в шаблоне примере подключалось меню на jquerry, вот видимо и законфликтовали. Меню все равно не использовал и удалил эти строчки, все заработало должным образом.

          Ответить
  5. balck

    замучался уже — форму входа выводит, но над ней пишет так:

    Warning: Memcache::addserver() expects parameter 2 to be long, string given in /home/balck667/domains/wortaki.com/public_html/libraries/joomla/cache/storage/memcache.php

    стоит joomla 1.5.14 + joomfish 2.04 + cb 1.2.1
    Подскажите в чем могут быть грабли?

    Ответить
  6. Дмитрий

    Подскажите, а как можно в модальном окне перейти например «забыли пароль»? сейчас оно закрывается и данные открываются просто на сайте, а надо чтобы всё происходило также внутри модального окна. Заранее спасибо!

    Ответить
  7. kolih

    А у меня все получилось. Но вот окошечко где появляется форма очень маленькое и все туда не помещается! Как сделать окно определенных размеров подскажите?

    Ответить
    • hiway

      Привет. Сделать это очень просто. Обратите внимание в файле mod_login/default.php после изменения кода есть строка a.setProperty(‘rel’, ‘{size: {x: 175, y: 225}, ajaxOptions: {method: «get»}}’); в статье в вставке кода ее номер 29. Так вот Значение x — это ширина, а y — высота всплывающего окна.

      Ответить
    • vvv

      Как сделать так чтобы при нажатии на ссылку, например, «ответ» или «подробнее», контент открывался в модальном окне.

      Ответить
  8. kolih

    спасибо большое! а интересно можно cb_login сделать всплывающим? а то обычный модуль входа не очень для Community Builder … за ранее благодарен!

    Ответить
  9. Hiway

    kolih. Вы писали: Не работает. Я вообще удалял эту строку, нет изменений!
    Хочу сказать что таки работает. Проверял лично. Вот смотрите demoj.hiwayarts.com

    Ответить
  10. Local Master

    Спасибо за такое, решение!!! Перепробовал много модулей, но это решение самое просто и действующее.
    Но не работает например с форума Kunena 1.5.9, а ведь тоже хочется вывод такой-же сделать.
    Не могли бы еще подсказать, как можно таким образом и регистрацию выводить? И например с форума Kunena 1.5.9, тоже хочется вывод такой-же сделать.

    Ответить
  11. Иван

    а у меня нет таких папок в папке с шаблоном:
    /templates/template_name/html/mod_login/default.php
    /templates/template_name/html/com_user/login/default_login.php
    и файлов таких там нет. В папке /templates/template_name/html/ у меня всего два файла: index.html и modules.php. И куда тогда мне их копировать????

    Ответить
  12. Ольга

    Я вроде все сделала по инструкции, но у меня почему-то во всплывающем окошке открывается весь index.php со всеми флеш-баннерами, а не только модуль авторизации =(((
    В чем может быть проблема?

    Ответить
  13. jafff

    Будет ли работать в компоненте которая требует входа, например компонент объявления, при нажатии добавить объявление, по умолчанию перекидывает на форму логин, пароль, и говорит войдите прежде чем… так вот будет ли всплывать данно емодальное окно?

    Ответить
  14. Shashel

    Спасибо. Все работает. Только вопрос. Как убрать полосу прокрутки и уменьшить чёрную рамку вокруг окна?

    Ответить
    • Hiway

      Shashel Строка 29 в файле html/mod_login/default.php a.setProperty('rel', '{size: {x: 175, y: 225}, ajaxOptions: {method: "get"}}'); x и y — это высота и ширина всплывающего окна.

      Ответить
      • Dyadyavova

        Скажите,пожалуйста,как поменять цвет текста (имя,пароль,запомнить меня),а то у меня белые буквы получаются на белом фоне?

        Ответить
  15. Вика

    Спасибо за статью, все очень понятно. Подскажите, как можно сделать отступ внутри всплывающего окна? а то весь текст и окошки логина и пароля плотно прилеплены к левой стороне. И еще вопрос, после закрытия этого окошка у меня пропадает картинка фона, приходится перегружать страницу, чтобы она снова появилась. Можно это как то исправить? Заранее спасибо.

    Ответить
  16. Lena

    Все работает, спасибо! Только есть одна проблема — когда неправильно вводишь пароль он выбрасывает тебя на главную страницу все время, а должен оставаться на той же странице на которой находится пользователь. Помогите исправить это, пожалуйста!

    Ответить
  17. Лена

    А как сделать так, чтобы если введен неправильный пароль, меня не выбрасывало на главную страницу?

    Ответить
  18. Hiway

    Елена. Это делается в настройках самого модуля логина. Данный прием не действует ни на какие функции модуля. Здесь только переписывается разметка отображения.

    Ответить
  19. Лена

    Если я возвращаю стандартный модуль, все работает, а с этим модулем он игнорирует переадресацию…….

    Ответить
  20. Hiway

    Елена, думаю, что могу упростить вам задачу. Вот здесь http://www.netqcreative.com/Free-extensions/joomla-popup-login-module.html можно скачать прекрасный вариант модуля логина уже в виде готового модуля с таким же функционалом и без проблем редиректа. Только для скачивания нужно зарегистрироваться.

    Ответить
  21. Rus

    Все работает, только есть одна проблема:
    Нажимаю вход — появляется модуль логина в отдельном окне. Если просто закрываю это отдельное окно без ввода логина, то в фоновом окне меняются параметры тэга body.
    Было
    body {
    background-color: #cccccc;
    }
    стало
    body {
    background-attachment: scroll;
    background-color: #ffffff;
    background-image: none;
    background-position: 0% 0%;
    background-repeat: repeat;
    color: #222222;
    font-family: «Helvetica Neue», «Arial», «Helvetica», sans-serif;
    font-size: 75%;
    }

    Ответить
  22. Alejandro

    Очень полезная и интересная статья! Однако, есть вопрос: когда я только начинал делать сайт локально, на денвере, всё сработало с первого раза. А сейчас его переношу в интернет, и там не работает. Уже 7 раз проверил всё, сделано буква в букву )) Но стандартные строчки ввода логина-пароля не исчезают. Может быть это вылезла несовместимость с чем-либо? Я постарался для тестов по максимуму отключить все джумловские модули, даже стандартные встроенные меню, но не помогает.

    Ответить
  23. Rus

    Мой вопрос, оказывается, был как у Вики. Я просто удалил /templates/system/css/template.css Вроде помогло.

    Ответить
  24. Rus

    Делаю то же самое, о чем писал jafff 3 августа, а именно вставил в контенте текст:

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

    Осталось решить Ленину проблему с редиректом на главную страницу.
    http://www.netqcreative.com/Free…ogin-module.html в этом случае не работает (не могу вызвать окно авторизации из контента).
    Неужели нет решения?

    Ответить
  25. Hiway

    Alejandro, Проверьте, подгружается ли mootools. И не находится ли ваш сайт в поддомене. Просто там все завязано на одном AJAX запросе и ответе, запрос естественно написан с помощью mootools, так как Joomla! изначально содержит эту библиотеку.

    Ответить
    • Alejandro

      Да, насчёт mootools я уже понял. И вообще с проблемой разобрался. Она была во мне )) В админке в определённую область страницы я пытался не главные строчки авторизации вывести, а те, что относятся к VirtueMart. Вывел нужную авторизацию-всё заработало. Прошу прощения за невнимательность )

      Ответить
  26. Hiway

    Rus, А какое отношение имеет текст «Добавить комментарий» в контенте к модулю логина???

    Ответить
  27. Женя

    Интересное решение. Но в опере 10.63 работает не коректно. Т. е. если страница не большая модальное окно закрывает не полностью.
    Остаётся небольшой белый пробел. Напиши, пожалуйста, по этому поводу.

    Ответить
  28. Rus

    Нужно смотреть содержимое ссылки. Я не подумал, что здесь редактор сообщений понимает html, а функции редактирования сообщений нет.
    Я имел ввиду текст:
    <!— Добавить комментарий —>
    Если и сейчас не отображается код, то прошу поправить мое сообщение.
    Данную ссылку я располагаю в статье. По клику для неавторизованного пользователя появляется окно авторизации.

    Ответить
    • hiway

      Rus. Так не работает это потому, что оно и не должно работать таким образом. Чтобы это работало вам нужно либо вставлять е просто текст а модуль авторизации с помощью плагина {mosloadposition}, либо же писать плагин для этого.
      Объясняю почему не работает: потому что когда вы выводите именно модуль в таком виде, то у вас выводится не просто текст а и система знает что нужно подключить в хелпер компонент com_user, что будет использоваться AJAX (об этом говорит скрипт внутри шаблона модуля) и т.д.
      А если вы просто вписали такую ссылку, то естественно вам выдастся просто комопнент логина без шаблона, а с использованием componenet.php в качестве разметки, который используется при вызове «tmpl=component» в URL

      Ответить
  29. Rus

    Похоже jComments не понимает {mosloadposition}, потому как в итоге отображается текст «{loadposition user1}» (joomla 1.5.22), а сам модуль не загружается.
    Ну вроде бы можно было решить проблему загрузкой модуля сразу после содержимого комментариев, однако это тоже не решает проблему — после авторизации происходит редирект на главную страницу.

    Ответить
  30. Михаил

    Отличная статья! Ну раз уж вы так разбираетесь, может подскажете. Весь инет перерыл…
    Как сделать проверку уникальности «имени пользователя» при регистрации (так же, как на «логине» и «емейле»). На форуме smf эта проверка работает. А как сделать в джумле?
    (на типичный вопрос «на фига это нужно?» отвечаю: регистрация на форуме идет через сайт, и в итоге — у меня 10 Наташ и 15 Михаилов)

    Ответить
  31. krontill

    Все отлично работает…Но на одном сайте появился необычный баг. Если в поле логина или поле пароля ввести букву «ч» или в английской раскладке букву «x», то окно закрывается…
    В чем может быть проблема? Может ли быть это связанно с версией мутулса?

    Ответить
  32. Павел

    Все путем, попробовал и модуль описанный тут

    Ребята ,зачем мучаться, есть отличное расширение специально для этих целей. Много настроек. поставил себе на сайт. все круто. вот линк разработчика:www.joomlaos.de/option,co…nfo/id,4030.html
    жду благодарностей)) шучу

    нормальный модуль, сделал перевод, убрал ссылку и все норм, рад)

    Ответить
  33. Александр

    Привет. Хорошая статья.
    Но у меня возник вопрос, как сделать вместо ссылки кнопку?

    Ответить
  34. Студент

    Доброго дня! Спасибо за статью!
    У меня такой вопрос по поводу {loadposition xxx}. На главной через модуль вывода новостей выводятся произвольные статьи сайта в три колонки. Дело в том, что в этих статьях на главной, в которых есть другие loadposition, отображается этот самый текст {loadposition rrr}, {loadposition mmm}. Как убрать этот текст?
    Если вопрос обсуждался, направьте, где об этом почитать можно, два дня поисков на нем. и рус. яз. ни к чему пока не привели(((

    Ответить
    • Hiway

      Студент Собственно вариантов 2:

      Сделать для модуля отдельные тексты. Поскольку в Joomla! 1.5 содержимое модулей не парсится плагинами.
      Поставить плагин под названием Module everywhere , но тогда текст будет дублироваться поскольку плагин будет выводить его и в модуле.

      Ответить
  35. Надежда

    Добрый день, хотела уточнить, я так понимаю данный хак можно применить для любого модуля и компонента? Так как мне нужно вывести в модальном окне форму обратной связи стороннего компонента. Если подскажете как это можно организовать буду очень благодарна!

    Ответить
    • Hiway

      Надежда для этого нужно использовать несколько иные решения. Самый простой способ — это опубликовать форму на отдельной странице, а потом использовать любой плагин с модальными окнами. Наиболее просто использовать JCEbox вместе с редактором JCE, думаю, для вас это будет самый оптимальный путь.

      Ответить
  36. Павел

    Добрый день!
    У меня белая страница, после того как я установил…
    Захожу в админку, а там ведите пароль, нажимаешь и белый лист.. чистый, чистый, белый белый…
    Помогите, пожалуйста.

    Ответить
  37. Евгениус

    Не выходит в связке Joomla 1.5.22+Virtue Mart 1.7 начиная с 1-го пункта (првки — default.php), все выглядит по старому, mootools подгружается, но увы 🙁

    Ответить

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

  • (не будет показан)