Я использую Twitter Bootstrap lib для нового проекта, и я хочу, чтобы часть страницы обновляла и извлекала последние json-данные о модальном закрытии. Я не вижу этого нигде в документации, может кто-нибудь указать мне на это или предложить решение.
Две проблемы с использованием документированных методов
$('#my-modal').bind('hide', function () {
// do something ...
});
Я присоединяю класс "скрыть" к модальному уже так, чтобы он не отображался при загрузке страницы, чтобы он дважды загружал
даже если я удаляю класс hide и устанавливаю идентификатор элемента display:none
и добавляю console.log("THE MODAL CLOSED");
к функции выше, когда я нажимаю, ничего не происходит.
$('#myModal').on('hidden.bs.modal', function () {
// do something…
})
См. getbootstrap.com/javascript/#modals-events
$('#myModal').on('hidden', function () {
// do something…
})
См. getbootstrap.com/2.3.2/javascript.html#modals → События
Для Bootstrap v3.0 вам просто нужно связать событие следующим образом:
$('#my-modal').on('hidden.bs.modal', function () {
window.alert('hidden event fired!');
});
См. раздел "Модальное использование" в документах:
http://getbootstrap.com/javascript/#modals-usage
См. этот JsFiddle для рабочего примера:
Запуск Bootstrap 3 (edit: все еще то же самое в Bootstrap 4) есть 2 экземпляра, в которых вы можете запускать события,:
$('#myModal').on('hide.bs.modal', function () {
console.log('Fired at start of hide event!');
});
$('#myModal').on('hidden.bs.modal', function () {
console.log('Fired when hide event has finished!');
});
$(document.body).on('hidden.bs.modal', function () {
$('#myModal').removeData('bs.modal')
});
Вместо "живого" вам нужно использовать событие "on", но назначьте его объекту документа:
Использование:
$(document).on('hidden.bs.modal', '#Control_id', function (event) {
// code to run on closing
});
Bootstrap предоставляют события, которые можно подключить к модальный, например, если вы хотите запустить событие когда модальность закончила скрываться от пользователь может использовать событие hidden.bs.modal как это
/* hidden.bs.modal event example */
$('#myModal').on('hidden.bs.modal', function () {
window.alert('hidden event fired!');
})
Обратите внимание на скрипку здесь подробнее о модальных методах и событиях здесь, в Документация
Я видел много ответов относительно событий бутстрапа, таких как hide.bs.modal
, который запускается, когда модальный закрывается.
Проблема с этими событиями: любые всплывающие окна в модальном (popovers, всплывающие подсказки и т.д.) вызовут это событие.
Есть еще один способ поймать событие, когда модальный закрывается.
$(document).on('hidden','#modal:not(.in)', function(){} );
Bootstrap использует класс in
, когда модаль открыт.
Очень важно использовать событие hidden
, так как класс in
все еще определен, когда запускается событие hide
.
Это решение не будет работать в IE8, поскольку IE8 не поддерживает селектор JQuery :not()
.
Я прыгаю сюда очень поздно, но для людей, использующих модальность Bootstrap с помощью React, я использовал MutationObserver для обнаружения изменений в модальной видимости и при правильной настройке состояния - этот метод может применяться для запуска любой функции при закрытии модальности:
//react stuff
componentDidMount: function() {
var self = this;
$(function() {
$("#example_modal").addClass('modal');
//use MutationObserver to detect visibility change
//reset state if closed
if (MutationObserver) {
var observer = new MutationObserver(function(mutations) {
//use jQuery to detect if element is visible
if (!$('#example_modal').is(':visible')) {
//reset your state
self.setState({
thingone: '',
thingtwo: ''
});
}
});
var target = document.querySelector('#example_modal');
observer.observe(target, {
attributes: true
});
}
});
}
Для тех, кто интересуется современной поддержкой браузера, CanIUse имеет покрытие MutationObserver на около 87%
Надеюсь, что это поможет кому-то:)
Приветствия,
Джейк
jQuery bind
и on
, где не срабатывает, когда модаль закрывается. У меня был больше успеха с live:
$('#my-modal').live('hidden', function(e) {
// do something
});
У меня были те же проблемы, что и у некоторых с
$('#myModal').on('hidden.bs.modal', function () {
// do something… })
Вам нужно разместить это в нижней части страницы, поместив его наверху, никогда не запускает событие.