Twitter Bootstrap. jQuery плагин modal

Twitter Bootstrap. jQuery плагин modal изображение поста

Теперь рассмотрим детально, как работать с javascript плагинами modal, tab. Работаем с jQuery плагином modal из twitter bootstrap. Итак, приведем минимально необходимую верстку для вызова 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 – событие происходит после полного закрытия модального окна, связанного с текущим объектом.

 

Комментарии
Adblock detector