Итак, приведем минимально необходимую верстку для вызова 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');

   Комментарий автора: имеет смысл применять только при передаче в опции модального окна плагина modal backdrop: 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 – событие происходит после полного закрытия модального окна, связанного с текущим объектом;

   Первая часть статьи с примером модальной формы авторизации/регистрации на twitter bootstrap находится здесь.

   В третьей части статьи мы рассмотрим, как работать с jQuery плагином tab из twitter framework bootstrap.

Больше информации о веб технологиях можно узнать из нашего перечня всех статей на сайте:

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


Яндекс.Метрика