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 – событие происходит после полного закрытия модального окна, связанного с текущим объектом.