Связайте функцию с Bootstrap Modal Close Twitter

StackOverflow https://stackoverflow.com/questions/8363802

Вопрос

Я использую LIB в Twitter Bootstrap в новом проекте, и я хочу, чтобы часть страницы обновила и извлекла последние данные JSON на Modal Close. Я нигде не вижу этого в документации, может ли кто -нибудь указать на это мне или предложить решение.

Две проблемы с использованием задокументированных методов

 $('#my-modal').bind('hide', function () {
   // do something ...
 });

Я уже прикрепляю класс «скрыть» к модалу, чтобы он не отображался на загрузке страницы, так что это будет загружаться дважды

Даже если я удалю класс скрыть и установите идентификатор элемента на display:none и добавить console.log("THE MODAL CLOSED"); к функции выше, когда я нажимаю близко, ничего не происходит.

Это было полезно?

Решение

Bootstrap 3 и 4

$('#myModal').on('hidden.bs.modal', function () {
    // do something…
});

Начальная загрузка 3: getbootstrap.com/javascript/#modals-events

Начальная загрузка 4: getbootstrap.com/docs/4.1/components/modal/#events

Bootstrap 2.3.2

$('#myModal').on('hidden', function () {
    // do something…
});

Видеть getbootstrap.com/2.3.2/javascript.html#modals → События

Другие советы

Начальная загрузка 4

$('#my-modal').on('hidden.bs.modal', function () {
  window.alert('hidden event fired!');
});

Смотрите этот jsfiddle для рабочего примера:

https://jsfiddle.net/6n7bg2c9/

См. Раздел «Модальные события документов» здесь:

https://getbootstrap.com/docs/4.3/components/modal/#events

Начинающий Начальная загрузка 3 (редактировать: все еще то же самое в Начальная загрузка 4) есть 2 случая, в которых вы можете запустить события, будучи:

1. Когда начинается модальное событие "скрыть"

$('#myModal').on('hide.bs.modal', function () { 
    console.log('Fired at start of hide event!');
});

2. Когда закончено модальное событие "Hide"

$('#myModal').on('hidden.bs.modal', function () {
    console.log('Fired when hide event has finished!');
});

Ref: http://getbootstrap.com/javascript/#js-events

Вместо «Live» вам нужно использовать »в« Событии », но назначьте его объекту документа:

Использовать:

$(document).on('hidden.bs.modal', '#Control_id', function (event) {
// code to run on closing
});

$(document.body).on('hidden.bs.modal', function () {
    $('#myModal').removeData('bs.modal')
});

Начальная загрузка предоставить события, в которые вы можете зацепить модальный, например, если вы хотите уволить мероприятие Когда модал закончил быть скрытым от пользователя, вы можете использовать hidden.bs.modal это событие подобное

    /* hidden.bs.modal event example */
    $('#myModal').on('hidden.bs.modal', function () {
          window.alert('hidden event fired!');
    })

Проверьте работу скрипка здесь Узнайте больше о модальных методах и событиях здесь, в Документация

Начальная загрузка 4:

$('#myModal').on('hidden.bs.modal', function (e) {
   // call your method
})

Hide.b.modal: Это событие сразу же запущено, когда был вызван метод экземпляра скрыть.

hidden.bs.modal: Это событие запускается, когда модал закончил быть спрятанным от пользователя (ждать завершения переходов CSS).

Я видел много ответов относительно событий начальной загрузки, таких как hide.bs.modal который запускается, когда модал закрывается.

Существует проблема с этими событиями: любые всплывающие окна в модале (Popers, Tooltips и т. Д.) Вызовут это событие.

Есть еще один способ поймать событие, когда модал закрывается.

$(document).on('hidden','#modal:not(.in)', function(){} );

Bootstrap использует in класс, когда модал открыт. Очень важно использовать hidden событие со времен класса in все еще определяется, когда событие hideзапускается.

Это решение не будет работать в IE8, так как IE8 не поддерживает jQuery :not() селектор.

У меня были те же проблемы, что и у некоторых с

$('#myModal').on('hidden.bs.modal', function () {
// do something… })

Вам нужно разместить это внизу страницы, поместив его наверху, никогда не стреляет в событие.

Я прыгаю в супер поздно здесь, но для людей, использующих модалы начальной загрузки с 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%

Надеюсь, это кому -то поможет :)

Ваше здоровье,

Джейк

Я бы сделал это так:

$('body').on('hidden.bs.modal', '#myModal', function(){ //this call your method });

Остальные уже написаны другими. Я также рекомендую прочитать документацию:jQuery - на методе

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top