
На сегодняшний день для джумлы уже существует множество модулей позволяющих реализовать вход на сайт в всплывающем окне. Но не всегда их применение даёт нужный результат - могут появляться конфликты и ошибки при обновлении движка 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>
В результате получим такую кнопочку:
Если что то не получается, задавайте вопросы в комментариях.
*** Авторизируйтесь чтобы писать комментарии.