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

Как сделать форму для авторизации пользователей во всплывающем окне на сайте Joomla. Готовый код, скрипт и стили для реализации входа на сайт в всплывающем окне

форма авторизации

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


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

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

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

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

templates/ваш-шаблон/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 для МаилРу Пошаговая инструкция по настройке авторизации на сайте при помощи компонента SLogin через сервис mail.ru. Позвольте пользователям заходить на сайт через маилру.

 

 

Комментарии 0

*** чтобы писать комментарии.