Форма + Modal Confirm с помощью Bootstrap
Навеяно необходимостью прикрутить к Twitter Bootstrap формам механизм модальных окон (modal confirm). Полагал, что найду готовое решение и был крайне удивлен, когда этого не произошло. Неужели это такая редкая необходимость? Если верить количеству соответствующих вопросов на stackoverflow.com, то с задачей сталкиваются многие, но адекватного решения никто не предложил. Под адекватным я подразумеваю то решение, которое не требует лишней html разметки, реализуется минимальным количеством JS кода и использует модальные окна из самого Twitter Bootstrap.
Дополнительной разметки будет минимум. Прежде всего, необходимо добавить параметр data-form-confirm к тэгу form вашей формы. Значением параметра должен быть id блока с разметкой модального окна.
Код формы:
<div class="container span6">
<form class="form-horizontal" action="?" method="get" data-form-confirm="your__id__modal__confirm">
...
</form>
</div>Я не привожу весь код формы, так как он стандартный и был взят из документации Twitter Bootstrap.
Код модального окна:
<div id="your__id__modal__confirm" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
...
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary btn-confirm">Yes</button>
</div>
</div>Это тоже стандартная разметка, исключая параметр id у контейнера и класс btn-confirm у кнопки апрува (кнопка «Yes» в примере).
В довершение JS код:
jQuery(function($) {
$('form[data-form-confirm]').submit(function(e) {
e.preventDefault();
var form = $(this),
modal = $('#' + form.attr('data-form-confirm'))
modal.modal({
show: true,
backdrop: true
});
modal.find('.btn-confirm').click(function() {
modal.modal('hide');
form.unbind('submit').submit();
});
});
});