Twitter Bootstrap: Модальное окно авторизации/регистрации на сайте

Twitter Bootstrap: Модальное окно авторизации/регистрации на сайте изображение поста

Задача очень простая и востребованная. Ведь не будем же мы заставлять нашего пользователя ходить по ссылкам регистрации/авторизации, грузить отдельную страницу (даже две: одну для авторизации, вторую для регистрации).

Если можно при помощи отдельного всплывающего модального окна позволить посетителю сделать выбор: войти ему на сайт, используя свой логин и пароль, или зарегистрироваться, формы регистрации и авторизации при этом вставив во вкладки. Удобно – один щелчок по вкладке в модальном окне отделяет нас от нужной формы регистрации или авторизации, при этом само окно остается компактных размеров.

Можно было бы обойтись двумя разными небольшими формами на странице: одна для авторизации, другая для регистрации. Но они будут мозолить глаза и только занимать место, которое можно использовать для представления другой информации (например, вместо этого разместить блок новых статей, или продать место под рекламу на сайте).

Итак, приведем верстку нашего модального окна со вкладками регистрации/авторизации:

Примечание автора: помните, необходимо задать doctype документа, как поддерживающего html5, для нормальной работы twitter bootstrap:

<!DOCTYPE HTML>
<html>
<head>

Далее подключаем twitter bootstrap (предположим, что twitter bootstrap framework находится у Вас в папке js,иначе измените папку на другую, где находится framework):

<link rel="stylesheet" href="/js/css/bootstrap.min.css" type="text/css" />
<script type="text/javascript" src="/./js/jquery.js"></script>
<script type="text/javascript" src="/./js/bootstrap.min.js"></script>

Приведем html самого всплывающего окна регистрации/авторизации со вкладками на twitter bootstrap.

Примечание автора: скомпилированный twitter bootstrap должен содержать оба плагина modal, tab, и все связанные с ними css стили.

<!-- Button to trigger modal -->
<button type="button" data-toggle="modal" data-target="#myModal"> Авторизация/Регистрация </button>
<!-- Modal -->
<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Добро пожаловать на наш сайт!</h3>
  </div>
  <div class="modal-body">
    <ul class="nav nav-tabs" id="login-or-register">
      <li ><a href="#register" data-toggle="tab">Регистрация</a></li>
      <li class="active"><a href="#profile" data-toggle="tab">Авторизация</a></li>
    </ul>
    <div class="tab-content">
      <div class="tab-pane" id="register">
            <form action="#">
                <div class="row">
                    <h3>У вас еще нет логина на нашем сайте?</h3>
                    <p>Зарегистрируйтесь, пожалуйста.</p>
                </div>
                <div class="row">
                    <label for="login">Введите Ваш логин</label>
                    <input id="login" name="login" value="" />
                    <span class="required">*</span>
                </div>
                <div class="row">
                    <label for="password">Введите Ваш пароль</label>
                    <input id="password" name="password" value="" />
                    <span class="required">*</span>
                </div>
                <div class="row">
                    <label for="password_repeat">Повторите Ваш пароль</label>
                    <input id="password_repeat" name="password_repeat" value="" />
                    <span class="required">*</span>
                </div>
                <div class="row">
                    Поля, помеченные <span class="required">*</span>, обязательны для заполнения.
                </div>
                <div class="row">
                    <input type="submit" id="register_button" class="register_button" value="Зарегистрироваться" />
                </div>
            </form>
      </div>
      <div class="tab-pane active" id="profile">
            <form action="#">
                <div class="row">
                    <h3>Уже есть логин?</h3>
                    <p>Авторизируйтесь, пожалуйста.</p>
                </div>
                <div class="row">
                    <label for="user_login">Введите Ваш логин</label>
                    <input id="user_login" name="login" value="" />
                    <span class="required">*</span>
                </div>
                <div class="row">
                    <label for="user_password">Введите Ваш пароль</label>
                    <input id="user_password" name="password" value="" />
                    <span class="required">*</span>
                </div>
                <div class="row">
                    Поля, помеченные <span class="required">*</span>, обязательны для заполнения.
                </div>
                <div class="row">
               <input type="checkbox" id="remember-me" /><label for="remember-me">Запомнить меня?</label>
               </div>
                <div class="row">
                    <input type="submit" id="login_button" class="login_button" value="Войти" />
                </div>
            </form>
      </div>
    </div>
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Закрыть</button>
  </div>
</div>

Как видите, вполне полноценная форма. Добавим к ней немного css:

#myModal{
     display: none;
  }
  #myModal .tab-pane .row {
     margin: 3px 0;
     width: 100%;
     float: none;
     padding: 0;
     float: none;
     clear: both;
     display: block;
  }
  #myModal .tab-pane .row label {
     display: block;
     float: left;
     cursor: pointer;
     width: 200px;
  }

И все! Ни строчки javascript. Наше всплывающее окно, содержащее формы авторизации/регистрации работает. Можете опробовать пример, достаточно щелкнуть по кнопке из примера в начале статьи.

Итак, приведем минимально необходимую верстку для вызова modal:

<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3>Заголовок окна – регистрация/авторизация</h3>
  </div>
  <div class="modal-body">
    <p>Основное содержимое…</p>
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Закрыть</button>
    </div>
</div>

Это минимально необходимая верстка для вызова модального окна, которая осуществляется по следующим правилам: элементы div class=»modal», div class=»modal-header», div class=»modal-body», div class=»modal-footer» – являются обязательными. Где: div class=»modal-header» – содержит шапку окна, тут, например, можно расположить заголовок окна: Авторизация/Регистрация, div class=»modal-body» – содержит основное содержимое окна, div class=»modal-footer» – содержит подвал окна, например: здесь можно расположить кнопки для взаимодействия с посетителем: для закрытия окна, сброса формы, сохранения данных (например, для отправки формы по ajax) и т.п.

Также plugin modal нам предлагает уже отверстанную кнопку закрытия модального окна: <button class=»btn» data-dismiss=»modal» aria-hidden=»true»>Закрыть</button>, для того, чтобы оформить элемент закрытия текущего окна, достаточно элементу button (или другому управляющему) назначить следующие html атрибуты: data-dismiss=»modal» aria-hidden=»true».

Классы стилей для изменения внешнего вида jQuery плагина modal (модального окна) из twitter bootstrap

Для стилизации окна Вы можете использовать следующие css классы:

  • .modal – для стилизации обрамления модального окна в целом;
  • .modal-header – для стилизации шапки модального окна;
  • .modal-body – для стилизации основного содержимого модального окна;
  • .modal-footer – для стилизации подвала модального окна;
  • .modal-backdrop – настраиваем тень вокруг модального окна;

Примечание автора: если Вы планируете вызвать окно только по щелчку по ссылке/кнопке, то его желательно изначально скрыть в контексте страницы при помощи css: .modal{ display: none;}

Вызов модального окна плагина jQuery modal из twitter bootstrap javascript через html атрибуты

Достаточно для элемента, щелчок по которому должен показать модальное окно, задать data-toggle=»modal», а также указать свойство data-target=»#id элемента, который содержит наше всплывающее окно», а для ссылки достаточно передать соответствующий анкор: a href=»#myModal » data-toggle=»modal». В нашем случае это:

<button type="button" data-toggle="modal" data-target="#myModal"> Авторизация/Регистрация </button>

Также, если Вы используете ссылку, можно передать в атрибуте href не анкор, а полноценную ссылку, содержимое которой будет загружено в модальное окно. Пример использования:

<a data-toggle="modal" href="/conditions-to-use.html" data-target="#myModal">Условия использования</a>

В данном примере содержимое страницы /conditions-to-use.html при щелчке по ссылке Условия использования будет загружено в область модального окна.

Примечание автора: будьте внимательны при подготовке документов для удаленной загрузки в модальные окна, предпочитайте этому размещение содержимого модального окна в его контейнере .modal-body, или же не размещайте javascript код в документах, загружаемых удаленно. Так как это может привести к серии javascript ошибок.

Инициализируем jQuery bootstrap плагин modal при помощи javascript

Итак, давайте изменим несколько строк в предыдущем примере.

Первое, добавим в шапку после подключения jQuery и Twitter Bootstrap javascript:

<script type="text/javascript">
jQuery(document).ready(function(){
      jQuery('#myModal').modal({
          keyboard: false,
          backdrop: false,
          show: false
        });
 
        jQuery('#modalToggle').on('click',function(){
            jQuery('#myModal').modal('toggle');
            return false;
        });
 
    });
  //-->
  </script>

В тело документа добавим следующую ссылку:

<a href="#myModal" id="modalToggle" class="btn">Авторизация/Регистрация</a>

И изменим контейнер нашего окна:

<!-- Modal -->
<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

Приведем его к виду:

<!-- Modal -->
<div class="modal" id="myModal">

Итак, после получения структуры документа (событие: documentReady) мы инициализируем наше модальное окно:

      jQuery('#myModal').modal({
          keyboard: false,
          backdrop: false,
          show: true
        });

Примечание автора: обратите внимание, после последнего параметра show: true в опциях объекта плагина .modal мы не ставим запятую, иначе это приведет к ошибке javascript в Internet Explorer 7.0.

И сразу же отображаем его на странице, причем запрещаем отключать его при помощи нажатия клавиши Escape и запрещаем отбрасывать тень.

После закрытия модального окна мы всегда можем управлять его появлением/сокрытием при помощи щелчка по ссылке Авторизация/Регистрация.

Какие свойства принимает jQuery плагин modal из twitter bootstrap?

  •    keyboard: true, false – по-умолчанию: true, скрыть окно при нажатии кнопки Escape (true – скрыть, false – не реагировать на нажатие кнопки Escape);
  •    backdrop: true, false – по-умолчанию: true, отображать тень вокруг окна, а также сделать все элементы страницы за окном недоступными (настоящее модальное окно), false – скрыть тень вокруг окна и сделать элементы «за» окном доступными для взаимодействия с посетителем;
  •    show: true, false – по-умолчанию: false, показывать окно сразу после инициализации плагина modal? (false – не показывать, true – показывать)
  •    remote: [путь к удаленной странице] – по умолчанию: null, путь к странице, которую желательно загрузить на лету удаленно в контейнер .modal-body.

Для этого после получения структуры документа (событие: documentReady) мы добавляем обработчик щелчка по ссылке Авторизация/Регистрация (id: modalToggle):

  jQuery('#modalToggle').on('click',function(){
            jQuery('#myModal').modal('toggle');
            return false;
        });

Для переключения состояния окна (показывать/скрыть модально окно) мы используем метод jQuery modal плагина toogle: jQuery(‘#myModal’).modal(‘toggle’).

Какие методы нам предлагает javascript плагин modal из framework twitter bootstrap?

  •    .modal(options) – инициализирует плагин, принимает набор свойств: keyboard, backdrop ,show, remoteописанных выше;
  •    .modal(‘toggle’) – меняет состояние модального окна: если окно скрыто – открывает, если окно открыто, соответственно скрывает: в нашем примере jQuery(‘#myModal’).modal(‘toggle’);

Комментарий автора: имеет смысл применять только при передаче в опции модального окна плагина modalbackdrop: false, иначе кнопка будет доступна для нажатия только тогда, когда окно закрыто;

  •    .modal(‘show’) – показать скрытое модальное окно;
  •    .modal(‘hide’) – скрыть открытое модальное окно;

Javascript события для плагина modal из framework twitter bootstrap

Приведем простой пример работы с событиями плагина modal, например, изменим текст кнопки вызова модального окна на Скрыть окно авторизации/регистрации, когда наше модальное окно отображается на странице, а когда скрыто – изменим на Показать окно авторизации/регистрации:

<script type="text/javascript">
jQuery(document).ready(function(){
       jQuery('#myModal').on('hidden', function () {
            jQuery ('#modalToggle').html('Показать окно авторизации/регистрации');
        });
 
        jQuery ('#myModal').on('show', function () {
            jQuery ('#modalToggle').html('Скрыть окно авторизации/регистрации');
        });
});
</script>

Комментарий автора: такой код имеет смысл, когда при инициализации плагина modal через javascript будут передан параметр: backdrop: false), который отключает «тень» вокруг окна и позволяет взаимодействовать посетителю с элементами на странице.

Перечислим основные события, которые поддерживает modal из набора javascript плагинов twitter bootstrap:

  •    show — событие происходит сразу после вызова метода show для текущего объекта плагина modal;
  •    shown – событие происходит сразу после открытия модального окна (применения всех визуальных эффектов), когда окно становится доступным для взаимодействия с посетителем;
  •    hide – событие происходит сразу после вызова метода hideдля текущего объекта плагина;
  •    hidden – событие происходит после полного закрытия модального окна, связанного с текущим объектом;
<ul class="nav nav-tabs" id="login-or-register">
      <li class="active"><a data-target="#register" href="#" data-toggle="tab">Регистрация</a></li>
      <li><a href="#" data-target="#profile" data-toggle="tab">Авторизация</a></li>
 </ul>
<div class="tab-content">
      <div class="tab-pane active" id="register">
                [содержимое]
     </div>
    <div class="tab-pane active" id="profile">
                [содержимое]
    </div>
</div>

Итак, минимальная разметка осуществляется по следующим правилам:

Для ненумерованного списка ul задаем классы class=»nav nav-tabs» – это приведет к автоматическому подключению плагина tab к заголовкам для вкладок (табов). Далее в ненумерованном списке ul class=»nav nav-tabs» в элементе списка li мы можем указать класс li class=»active», чтобы сделать выбранную вкладку активной.

Внутри элемента ненумерованного списка li должен сразу следовать тег ссылки a с html атрибутом a data-toggle=»tab» (активирует плагин tab из twitter bootstrap для указанного заголовка), html атрибут href у ссылки а должен быть анкором, который связан с содержимым вкладки, указывая на элемент в документе с id, равным анкору.

Причем ссылка должна сразу начинаться с анкора – знака #, не с www, или http://, не со знака косой черты, а именно с анкора #. А элемент, связанный с анкором по id, должен обязательно существовать в документе.

Также можно, как видно из примера, оставить атрибут href ссылки a в покое и не заполнять анкор, а задать связанный элемент через data-target=»#profile», где значение атрибута data-target и есть id связанного в содержимом элемента в контексте страницы с содержимым вкладки (можно передать класс элемента, но по связанному id работать будет быстрее).

Например для заголовка:

<li><a href="#profile" data-toggle="tab">Авторизация</a></li>

Среди дочерних элементов в регионе div class=»tab-content» должен существовать элемент div class=»tab-pane active» id=»profile» (в нем будет располагаться связанное с заголовком содержимое вкладки).

Далее желательно сразу после ненумерованного списка с заглавием расположить обязательный контейнер для содержимого вкладок:

<div class="tab-content">

В котором будут следовать все вкладки, связанные с анкорами заголовков: В нашем случае это вкладки Авторизация и Регистрация:

<div class="tab-content">
<div class="tab-pane active" id="register">
                [содержимое]
     </div>
    <div class="tab-pane active" id="profile">
                [содержимое]
    </div>
</div>

Для выделения содержимого активной вкладки вместе с классом .tab-pane используется класс .active.

Классы стилей для изменения внешнего вида вкладок jQuery плагина tab из twitter bootstrap

  • .nav, .nav-tabs – управляют внешним видом заголовков ненумерованного стиля, границами общей области заголовков;
  • .nav li, .nav-tabs li a – управление внешним видом каждого из заголовков;
  • .nav li.active, .nav li.active a – управление внешним видом активного заголовка вклакди;
  • .tab-content – управление внешним видом области содержимого вкладок (всей области);
  • .tab-pane – управление внешним видом содержимого вкладки;
  • .tab-pane.active – управление внешним видом содержимого активной вкладки;

Javascript методы jQuery плагина tab из twitter bootstrap

  • .tab(‘show’) – метод предназначен для активации указанной вкладки и ее содержимого (можно по id, или другим удобным способом).    Чтобы в нашем примере активировать первую вкладку, необходимо добавить следующий код:
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#login-or-register a:first).tab('show');
}
</script>

В виде аргумента jQuery передаем необходимый заголовок вкладки (ссылку а) для активации. Примечание автора: для увеличения быстродействия достаточно назначить каждой ссылке – заголовку для вкладки (таба) свой id, и вызывать активацию вкладки по умолчанию (например, после загрузки документа) по id ссылки a.

Javascript события плагина tab из twitter bootstrap

  • show – событие происходит при выборе новой вкладки (по щелчку по ссылке новой вкладки), но еще до того, как будет отображено содержимое этой вкладки. Кстати, внутри события можно использовать следующие переменные объекта event, как указатели на текущий заголовок вкладки (ссылку, по которой щелкнул посетитель) – event.target, а также переменную event.relatedTarget – как указатель на ссылку – заголовок предыдущей вкладки (если предыдущая вкладка имеется в документе). При этом сам объект event требуется передать в функцию – обработчик события явно, например:
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('a[data-toggle="tab"]').on('show', function (event) {
  alert(event.target); // активная вкладка
  alert(event.relatedTarget); // предыдущая вкладка
});
});
</script>
  • shown – событие происходит при показе текущей вкладки, когда содержимое вкладки уже доступно для взаимодействия с посетителем (вкладка показана полностью). Здесь также доступны: event.target, event.relatedTarget.

Вот, пожалуй, и все, что необходимо знать нам о работе этих плагинов. В этом цикле статей мы ознакомились на конкретном примере верстки формы авторизации/регистрации для сайта с работой jQuery плагинов modal,tab из framework twitter bootstrap, а также познакомились с их методами внедрения и api.

В следующем цикле статей мы рассмотрим jQuery плагин popover из twitter bootstrap в реализации примеров для оповещения пользователя при неверном заполнении формы, а также в реализации примера со всплывающими областями для регистрации, авторизации, компактными по размеру и без необходимости вызова и применения модальных окон.

Комментарии