Модальное окно 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">×</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">×</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">×</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;
}
Скачать эту модальную форму
Готово! Вот и все. Надеюсь, вам понравилось.