Модальное окно 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 4 на Bootstrap 5

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

В 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>
Динамическая карусель на Bootstrap в PHP

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

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

<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»