Модальное окно 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;
}

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

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

Пожалуйста, оставляйте свои отзывы по текущей теме материала. За комментарии, подписки, дизлайки, отклики, лайки огромное вам спасибо!

Пожалуйста, опубликуйте свои мнения по текущей теме статьи. Мы очень благодарим вас за ваши комментарии, лайки, отклики, дизлайки, подписки!

Вадим Дворниковавтор-переводчик статьи «Designing Login, Sign Up & Forgot Password Modal Form with Bootstrap»