Вход в личный кабинет Модальное окно bootstrap: разработка формы входа, регистрации и восстановления пароля
Создавать и настраивать модальное окно с помощью Bootstrap, довольно просто. Модальные окна всплывают и открываются на той же странице без редиректа.
Демо-версия
В этой статье мы рассмотрим создание модального окна с валидацией. Для этого я использовал последнюю версию Bootstrap (V 3.3.7). Также вы можете использовать CDN.
Ниже приведен код HTML страницы, в которой подключаются необходимые файлы CSS и JS:
В Bootstrap класс modal-content содержит div-блоки modal-header, modal-body и modal-footer . Это структура модального окна.
В Bootstrap класс modal-content содержит div-блоки modal-header, modal-body и modal-footer . Это структура модального окна.
Этот код будет размещаться чуть выше JavaScript, как показано в структуре страницы. Смотрите пример, приведенный ниже.
Это полная структура страницы, которая требуется для создания модальных окон. Создайте страницу Index.html и добавьте в нее приведенный ниже код.
Теперь создадим модальные формы входа, регистрации и восстановления пароля. Единственное модальное окно, которое я использовал в примере, с тремя <div class=”modal-content”>. По умолчанию оно будет формой входа в систему. Такие же блоки мы создаем для других функций, все они будут иметь разные идентификаторы. Смотрите пример, приведенный ниже.
Содержимое модального окна для авторизации будет использоваться по умолчанию. Остальные два блока скрыты и их можно будет отобразить при нажатии на конкретные ссылки, указанные во всех футерах.
Составим полный модуль модального окна, который включает в себя блоки div для модальных окон входа в систему, регистрации и восстановления пароля.
Веб-форма включает в себя одно модальное окно с тремя модальными блоками. Все футеры содержат отдельные ссылки, которые запускают различные модальные блоки [login/signup/forgot password]. То есть футер login содержит ссылки на signup и forgot password; футер signup содержит ссылки на login и forgot password; футер forgot password содержит ссылки на login и signup.
Рассмотрим код jQuery. В нем используются методы FadeOut и FadeIn, которые срабатывают при клике по ссылкам футера. После чего формы меняются местами.
Для валидации форм используется плагин Parsley.JS Form Validation.
Чтобы использовать валидацию формы с помощью Parsley, добавьте файл parsley.min.js. А для запуска валидации добавьте еще одну строку кода jQuery.
Это весь код jQuery.
Ниже приводится CSS-код для всех модальных форм и Parsley.
Скачать эту модальную форму
Готово! Вот и все. Надеюсь, вам понравилось.
Пожалуйста, оставьте ваши мнения по текущей теме статьи. Мы очень благодарим вас за ваши комментарии, отклики, подписки, дизлайки, лайки!
Подключение скрипта всплывающего окна
Откройте индексный файл шаблона index.php, нахоящийся по следующему пути:
templates/ваш-шаблон/index.php
Опуститесь в самый низ файла и перед закрывающимся тегом </body> вставьте следующий код:
Создание кнопки/ссылки
Последним шагом будет создание кнопки, при клике по которой будет появляться всплывающее окно с формой авторизации на сайте.
Для новичков лучшим вариантом будет создать модуль тип HTML и в нём поместить html-код кнопки авторизации. Модуль сделать доступным только для Public и гостей, чтобы не показывать его для авторизированных на сайте пользователей.
Более опытные могут написать php-код с проверкой на авторизированного пользователя и вставить код в индексный файл шаблона.
HTML-код кнопки:
Вы спокойно можете стилизовать кнопку добавив ей классы и стили. Например если у вас шаблон на бутстрапе, то кнопку можно сделать так:
Создание модуля авторизации
После того как мы создали модальное окно с позицией в шаблоне, нужно создать сам модуль для авторизации.
Для этого в админке открываем менеджер модулей и создаём новый модуль тип – Вход на сайт. Можно использовать модули авторизации из других расширений: SLogin, Kunena, Community Builder и др.
Если у вас уже создан модуль авторизации, можно просто отредактировать его, изменив в нём позицию.
Итак, основная настройка в модуле необходимая для нас – это позиция. Вписываем позицию login. Изначально в списке позиций такой нет. Нужно просто прописать её вручную:
Так же проверьте чтобы модуль был опубликован.