Разработка модальной формы входа, регистрации и восстановления пароля с помощью Bootstrap

Создавать и настраивать модальные окна при помощи Bootstrap, довольно просто. Модальные окна всплывают и открываются на той же странице без редиректа.

Демо-версия

Разработка модальной формы входа, регистрации и восстановления пароля при помощи Bootstrap

В данной статье мы рассмотрим создание модального окна с валидацией. Для этого я использовал последнюю версию Bootstrap(V 3.3.7). Также вы можете без проблем использовать CDN.

Дизайн: Структура страницы

Ниже приведен код HTML страницы, в которой подключаются необходимые файлы CSS и JS:

<!DOCTYPE html><html><head><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"></head><body> <!-- Здесь будет модальное окно... --> <!-- Здесь помещаются JS файлы. --><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script></body></html>

Дизайн: Модальное окно

В Bootstrap класс modal-content включает div-блоки modal-header, modal-body и modal-footer. Это структура модального окна.

<div class="modal fade" tabindex="-1" role="dialog"><div class="modal-dialog" role="document"><div class="modal-content"><div class="modal-header"><!-- Заголовок модального окна --> </div><div class="modal-body"><!-- Тело модального окна --></div><div class="modal-footer"><!-- Футер модального окна --></div></div><!-- /.modal-content --></div><!-- /.modal-dialog --></div><!-- /.modal -->

Дизайн: Модальное окно

В Bootstrap класс modal-content включает div-блоки modal-header, modal-body и modal-footer. Это структура модального окна.

<div class="modal fade" tabindex="-1" role="dialog"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <!-- Заголовок модального окна --> </div> <div class="modal-body">     <!-- Тело модального окна -->      </div>      <div class="modal-footer">        <!-- Футер модального окна -->      </div>    </div><!-- /.modal-content -->  </div><!-- /.modal-dialog --></div><!-- /.modal -->

Этот программный код будет размещаться чуть выше JavaScript, как показано в структуре страницы. Смотрите пример, приведенный ниже.

Полная структура страницы

Это полная структура страницы, которая требуется для создания модальных окон. Создайте страницу Index.html и добавьте в нее приведенный ниже программный код.

<!DOCTYPE html><html><head><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"></head><body>         <div class="modal fade" tabindex="-1" role="dialog">      <div class="modal-dialog" role="document">        <div class="modal-content">        <div class="modal-header">          <!-- Заголовок модального окна -->        </div>        <div class="modal-body">          <!-- Тело модального окна -->        </div>        <div class="modal-footer">          <!-- Футер модального окна -->        </div>        </div><!-- /.modal-content -->      </div><!-- /.modal-dialog -->    </div><!-- /.modal -->           <!-- Здесь помещаются JS файлы. -->    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script></body></html>

Сейчас создадим модальные формы входа, регистрации и восстановления пароля. Единственное модальное окно, которое я использовал в примере, с тремя <div class=»modal-content»>. По умолчанию оно будет формой входа в систему. Такие же блоки мы создаем для иных возможностей, все они будут иметь различные идентификаторы. Смотрите пример, приведенный ниже.

<div class="modal fade" tabindex="-1" role="dialog">  <div class="modal-dialog" role="document">    <div class="modal-content" id="login-modal-content">      <div class="modal-header">        <!-- Заголовок Login -->      </div>      <div class="modal-body">        <!-- Тело Login -->      </div>      <div class="modal-footer">        <!-- Футер Login -->      </div>    </div>    <div class="modal-content" id="signup-modal-content">      <div class="modal-header">        <!-- Заголовок Signup -->      </div>      <div class="modal-body">        <!-- Тело Signup -->      </div>      <div class="modal-footer">        <!-- Футер Signup -->      </div>    </div>    <div class="modal-content" id="forgot-password-modal-content">      <div class="modal-header">        <!-- Заголовок Forgot Password -->      </div>      <div class="modal-body">        <!-- Тело Forgot Password -->      </div>      <div class="modal-footer">        <!-- Футер Forgot Password -->      </div>

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

Формы входа, регистрации и восстановления пароля: Полный код модального окна

<div id="login-signup-modal" class="modal fade" tabindex="-1" role="dialog">   <div class="modal-dialog" role="document">         <!-- содержимое модального окна login -->        <div class="modal-content" id="login-modal-content">                  <div class="modal-header">            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>            <h4 class="modal-title"><span class="glyphicon glyphicon-lock"></span> Login Now!</h4>          </div>                  <div class="modal-body">          <form method="post" id="Login-Form" role="form">            <div class="form-group">                <div class="input-group">                <div class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></div>                <input name="email" id="email" type="email" class="form-control input-lg" placeholder="Enter Email" required data-parsley-type="email" >                </div>                                  </div>            <div class="form-group">                <div class="input-group">                <div class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></div>                <input name="password" id="login-password" type="password" class="form-control input-lg" placeholder="Enter Password" required data-parsley-length="[6, 10]" data-parsley-trigger="keyup">                 </div>                                  </div>            <div class="checkbox">              <label><input type="checkbox" value="" checked>Remember me</label>            </div>              <button type="submit" class="btn btn-success btn-block btn-lg">LOGIN</button>          </form>        </div>                <div class="modal-footer">          <p>          <a id="FPModal" href="javascript:void(0)">Forgot Password?</a> |           <a id="signupModal" href="javascript:void(0)">Register Here!</a>          </p>        </div>               </div>        <!-- содержимое модального окна login -->                <!-- содержимое модального окна signup -->        <div class="modal-content" id="signup-modal-content">                <div class="modal-header">          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>          <h4 class="modal-title"><span class="glyphicon glyphicon-lock"></span> Signup Now!</h4>        </div>                        <div class="modal-body">          <form method="post" id="Signin-Form" role="form">            <div class="form-group">                <div class="input-group">                <div class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></div>                <input name="email" id="email" type="email" class="form-control input-lg" placeholder="Enter Email" required data-parsley-type="email">                </div>                                 </div>            <div class="form-group">                <div class="input-group">                <div class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></div>                <input name="password" id="passwd" type="password" class="form-control input-lg" placeholder="Enter Password" required data-parsley-length="[6, 10]" data-parsley-trigger="keyup">                </div>                                  </div>            <div class="form-group">                <div class="input-group">                <div class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></div>                <input name="password" id="confirm-passwd" type="password" class="form-control input-lg" placeholder="Retype Password" required data-parsley-equalto="#passwd" data-parsley-trigger="keyup">                </div>                                  </div>            <button type="submit" class="btn btn-success btn-block btn-lg">CREATE ACCOUNT!</button>          </form>        </div>        <div class="modal-footer">          <p>Already a Member? <a id="loginModal" href="javascript:void(0)">Login Here!</a></p>        </div>       </div>       <!-- содержимое модального окна signup -->               <!-- содержимое модального окна forgot password -->       <div class="modal-content" id="forgot-password-modal-content">                <div class="modal-header">          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>          <h4 class="modal-title"><span class="glyphicon glyphicon-lock"></span> Recover Password!</h4>        </div>                <div class="modal-body">          <form method="post" id="Forgot-Password-Form" role="form">            <div class="form-group">                <div class="input-group">                <div class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></div>                <input name="email" id="email" type="email" class="form-control input-lg" placeholder="Enter Email" required data-parsley-type="email">                </div>                                 </div>                     <button type="submit" class="btn btn-success btn-block btn-lg">              <span class="glyphicon glyphicon-send"></span> SUBMIT            </button>          </form>        </div>                <div class="modal-footer">          <p>Remember Password? <a id="loginModal1" href="javascript:void(0)">Login Here!</a></p>        </div>               </div>               <!-- содержимое модального окна forgot password -->    </div></div>

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

Веб-форма содержит одно модальное окно с тремя модальными блоками. Все футеры содержат отдельные ссылки, которые запускают разные модальные блоки [login/signup/forgot password]. То есть футер login включает ссылки на signup и forgot password; футер signup включает ссылки на login и forgot password; футер forgot password включает ссылки на login и signup.

JQuery часть

Рассмотрим программный код jQuery. В нем используются способы FadeOut и FadeIn, которые срабатывают при клике по ссылкам футера. После чего формы меняются местами.

<script>$(document).ready(function(){          $('#Login-Form').parsley();    $('#Signin-Form').parsley();    $('#Forgot-Password-Form').parsley();         $('#signupModal').click(function(){              $('#login-modal-content').fadeOut('fast', function(){        $('#signup-modal-content').fadeIn('fast');     });    });               $('#loginModal').click(function(){               $('#signup-modal-content').fadeOut('fast', function(){        $('#login-modal-content').fadeIn('fast');     });    });          $('#FPModal').click(function(){              $('#login-modal-content').fadeOut('fast', function(){        $('#forgot-password-modal-content').fadeIn('fast');        });    });          $('#loginModal1').click(function(){               $('#forgot-password-modal-content').fadeOut('fast', function(){        $('#login-modal-content').fadeIn('fast');     });    });        });</script>

Валидация формы

Для валидации форм используется плагин Parsley.JS Form Validation.

Чтобы использовать валидацию формы при помощи Parsley, добавьте файл parsley.min.js. А для запуска валидации добавьте ещё одну строку кода jQuery.

$('#Login-Form').parsley();$('#Signin-Form').parsley();$('#Forgot-Password-Form').parsley();

Это весь программный код jQuery.

CSS-часть

Ниже приводится CSS-код для всех модальных форм и Parsley.

body {  padding-top: 70px;}.modal-header,.modal-body,.modal-footer{  padding: 25px;}.modal-footer{  text-align: center;}#signup-modal-content, #forgot-password-modal-content{  display: none;} /** Валидация */  input.parsley-error{      border-color:#843534;  box-shadow: none;}input.parsley-error:focus{      border-color:#843534;  box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #ce8483}.parsley-errors-list.filled {  opacity: 1;  color: #a94442;  display: none;}

Скачать эту модальную форму

Готово! Вот и все. Надеюсь, вам понравилось.

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *