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

  На сегодняшний день для джумлы уже существует множество модулей позволяющих реализовать вход на сайт в всплывающем окне. Но не всегда их применение даёт нужный результат - могут появляться конфликты и ошибки при обновлении движка Joomla, версии PHP или установке на сайт разных расширений.

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

  Вход на сайт требуется для зарегистрированных пользователей, поэтому у вас на сайте должна быть включена регистрация пользователей. Если вы ещё этого не сделали, тогда вот инструкция как включить регистрацию в Joomla. Я этот момент пропускаю и перехожу к реализации входа на сайт в всплывающем окне.

Подключение скрипта всплывающего окна

Откройте индексный файл шаблона index.php, нахоящийся по следующему пути:

Опуститесь в самый низ файла и перед закрывающимся тегом </body> вставьте следующий код:

<div class="overlayModal"></div>
<div class="modalLogin">
    <button class="modalBtnClose" title="Закрыть">x</button>
    <jdoc:include type="modules" name="login" style="none" />
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        var loginModal = document.querySelector('.modalLogin'),
            overlay = document.querySelector('.overlayModal'),
            btnLogin = document.querySelector('#btnLoginModal');

        if (btnLogin) {
            btnLogin.addEventListener('click', function() {
                overlay.style.display = 'block';
                loginModal.style.display = 'block';
            });
        }
        
        function modalHide() {
            loginModal.style.display = 'none';
            overlay.style.display = 'none';
        }

        document.querySelector('.modalBtnClose').addEventListener('click', modalHide);
        overlay.addEventListener('click', modalHide);
    });
</script>

  В этом коде мы добавили оверлей (затемнение экрана при вызове модального окна), модальное окно внутри которого создали новую позицию для модулей с названием login и скрипт который включает-выключает модальное окно.

Если хотите, то скрипт можно вынести в файл js.

В css добавьте следующие стили:

.overlayModal {
    display: none;
    position: fixed;
    z-index: 999;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background: #000;
    opacity: .7;
}
.modalLogin {
    display: none;
    position: fixed;
    width: 250px; /* ширина модального окна */
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000;
    border: solid 6px #3E5D75;
    border-radius: 12px;
    background: #ededed;
    box-shadow: inset 2px -2px 6px 2px rgba(45, 45, 45, 0.6), 0 1px 2px rgb(153, 153, 153);
}
.modalBtnClose {
    float: right;
    background: #76c067;
    color: #fff;
    font-size: 17px;
    width: 50px;
    height: 25px;
    top: 0;
    position: absolute;
    right: 0;
    border: 0;
    border-top-right-radius: 5px;
    border: 1px solid #699051;
    box-shadow: inset 1px -1px 3px rgba(0,0,0,0.3), 0 1px 2px rgba(0, 0, 0, 0.4);
}
.modalBtnClose:hover {
    background: #1b7b08;
}

Создание модуля авторизации

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

  Для этого в админке открываем менеджер модулей и создаём новый модуль тип - Вход на сайт. Можно использовать модули авторизации из других расширений: SLogin, Kunena, Community Builder и др.

  Если у вас уже создан модуль авторизации, можно просто отредактировать его, изменив в нём позицию.

  Итак, основная настройка в модуле необходимая для нас - это позиция. Вписываем позицию login. Изначально в списке позиций такой нет. Нужно просто прописать её вручную:

  Так же проверьте чтобы модуль был опубликован.

Создание кнопки/ссылки

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

  Для новичков лучшим вариантом будет создать модуль тип HTML и в нём поместить html-код кнопки авторизации. Модуль сделать доступным только для Public и гостей, чтобы не показывать его для авторизированных на сайте пользователей.

Более опытные могут написать php-код с проверкой на авторизированного пользователя и вставить код в индексный файл шаблона.

HTML-код кнопки:

<button id="btnLoginModal">Авторизация</button>

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

<button id="btnLoginModal" type="button" class="btn btn-secondary">Авторизация</button>

В результате получим такую кнопочку:

Авторизация

  Если что то не получается, задавайте вопросы в комментариях.

Настраиваем Slogin для МаилРу

Пошаговая инструкция по настройке авторизации на сайте при помощи компонента SLogin через сервис mail.ru. Позвольте пользователям заходить на сайт через маилру.