ti-enxame.com

Vincular uma função ao Twitter Bootstrap Modal Fechar

Estou usando o Twitter Bootstrap lib em um novo projeto e quero que parte da página atualize e recupere os dados mais recentes do json no fechamento modal. Eu não vejo isso em qualquer lugar na documentação, alguém pode apontar para mim ou sugerir uma solução.

Dois problemas com o uso dos métodos documentados

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

Eu anexei uma classe "hide" ao modal já para que ela não seja exibida no carregamento da página, de modo que seja carregada duas vezes

mesmo se eu remover a classe hide e definir o id do elemento para display:none e adicionar console.log("THE MODAL CLOSED"); para a função acima quando eu apertar perto nada acontece.

457
BillPull

Bootstrap 3 e 4

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

Bootstrap 3: getbootstrap.com/javascript/#modals-events

Bootstrap 4: getbootstrap.com/docs/4.1/components/modal/#events

Bootstrap 2.3.2

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

Veja getbootstrap.com/2.3.2/javascript.html#modals → Eventos

975
Ricardo Lima

Bootstrap 4

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

Veja este JSFiddle para um exemplo de trabalho:

http://jsfiddle.net/aq9Laaew/120440/

Veja a seção Eventos Modais dos documentos aqui:

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

109
aar0n

Iniciando Bootstrap 3 (edit: continua o mesmo em Bootstrap 4) existem 2 instâncias nas quais você pode iniciar eventos, sendo: 

1. Quando o evento modal "ocultar" é iniciado

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

2. Quando o evento modal "ocultar" terminar

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

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

42
aesede

Em vez de "live" você precisa usar o evento "on", mas atribuí-lo ao objeto do documento:

Usar:

$(document).on('hidden.bs.modal', '#Control_id', function (event) {
// code to run on closing
});
14
Oscar
$(document.body).on('hidden.bs.modal', function () {
    $('#myModal').removeData('bs.modal')
});
13
SUNny.K

Bootstrap fornece eventos que você pode ligar em modal , como se você quer disparar um event quando o modal acabou de ser escondido o usuário você pode usar hidden.bs.modal evento como este

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

Verifique um trabalho violino aqui leia mais sobre métodos e eventos modais aqui em Documentação

6
Subodh Ghulaxe

Eu vi muitas respostas sobre os eventos de inicialização, como hide.bs.modal, que é acionado quando o modal é fechado.

Há um problema com esses eventos: qualquer pop-up no modal (popovers, dicas de ferramentas, etc) irá acionar esse evento.

Existe outra maneira de capturar o evento quando um modal é fechado.

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

O Bootstrap usa a classe in quando o modal está aberto. É muito importante usar o evento hidden, pois a classe in ainda é definida quando o evento hide é acionado.

Esta solução não funcionará no IE8, pois o IE8 não suporta o seletor :not() do Jquery.

2
Tortus

Bootstrap 4:

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

hide.bs.modal : Este evento é acionado imediatamente quando o método hide da instância é chamado.

hidden.bs.modal : Este evento é acionado quando o modal está sendo ocultado do usuário (aguardará a conclusão das transições CSS).

1
sendon1982

Eu estava tendo os mesmos problemas que alguns com

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

Você precisa colocar isso na parte inferior da página, colocando-o no topo nunca aciona o evento.

1
Michael Granger

Eu estou pulando em super tarde aqui, mas para pessoas que usam modais de Bootstrap com React eu tenho usado MutationObserver para detectar mudanças na visibilidade de um modal e ajustar o estado adequadamente - este método poderia ser aplicado para executar qualquer função quando o modal está fechado: 

//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
          });
        }
    });
}

Para aqueles que querem saber sobre o suporte a navegadores modernos, CanIUse tem a cobertura do MutationObserver em por volta de 87%

Espero que ajude alguém :)

Felicidades, 

Jake

1
jacobedawson

Eu faria assim:

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

O resto já foi escrito por outros. Eu também recomendo ler a documentação: jquery - on method

0
tkartas