Vincular uma função ao Twitter Bootstrap Modal Fechar

530

Estou usando a lib do Twitter Bootstrap em um novo projeto e quero que parte da página atualize e recupere os dados mais recentes do json no fechamento modal. Não vejo isso em nenhum lugar da documentação. Alguém pode me indicar ou sugerir uma solução.

Dois problemas com o uso dos métodos documentados

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

Eu anexo uma classe "hide" ao modal já, para que ele não seja exibido no carregamento da página, o que seria carregado duas vezes

mesmo que eu remova a classe hide e defina a identificação do elemento como display:nonee adicione console.log("THE MODAL CLOSED");à função acima quando eu fechar, nada acontece.

BillPull
fonte

Respostas:

1139

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

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

Ricardo Lima
fonte
1
Isso parece funcionar, exceto, por algum motivo, ao passar o mouse sobre um botão no rodapé modal, ele também é acionado. O botão é um botão de envio regular: <input type = "submit" class = "btn btn-info" value = "Go" /> Alguma idéia de como não fazer com que o evento hide seja acionado ao passar o mouse sobre ele? Ou como posso detectar que ele foi disparado por causa do cursor do mouse? BTW: mesmo que o evento seja disparado, a caixa de diálogo modal não fecha.
Guy
2
Não estou vendo esse comportamento com o Bootstrap 3, você pode mexer?
Sp00n
7
Essa resposta provavelmente deve mencionar a diferença entre hidden.bs.modal e hide.bs.modal. Oculto é acionado quando as animações CSS são concluídas, mas nos meus testes, se não houver animações, nunca é acionado (pode ser apenas um bug). Se você estiver trabalhando com gerenciamento de dados, pode ser mais seguro usar o hide.bs.modal, que é acionado assim que o .modal ('hide') é chamado. getbootstrap.com/javascript/#modals-usage - Consulte a subseção Eventos.
Evan Steinkerchner
2
Bootstrap 3: funciona quando clico em uma marca modal marcada como data-dismiss="modal"(como um botão Fechar), mas não funciona quando clico na área de plano de fundo preto ao redor do modal. O modal é descartado, mas não pode ser reaberto até que a página seja atualizada. Eu tentei os dois 'hidden.bs.modal'e 'hide.bs.modal'sem sucesso.
Marquito
5
@marquito O que você pode fazer (o que eu faço) é usá-lo da seguinte forma: $('#myModal').modal({ backdrop: 'static', keyboard: false });Dessa forma, o modal não será fechado quando clicar na área cinza, nem ao pressionar a tecla Esc.
aesede
123

Bootstrap 4

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

Veja este JSFiddle para um exemplo de trabalho:

https://jsfiddle.net/6n7bg2c9/

Consulte a seção Eventos modais dos documentos aqui:

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

aar0n
fonte
1
Para qualquer pessoa que encontre esta postagem procurando implementar esse tipo de retorno de chamada, existe um módulo de extensão para o Bootstrap que inclui essa funcionalidade, além de muitas outras funções úteis para criar dinamicamente diálogos / alertas / confirmações: bootboxjs.com
jkriddle
A resposta de @Ricardo Lima a seguir é agora o método correto para monitorar eventos em jQuery / inicialização
sbonami
@meatballs ainda tem um voto positivo para o exemplo de trabalho ... mesmo que o bind tenha sido descontinuado.
Stephen Patten
@ 100acrewood Cara, agora que é um achado! Obrigado! Re: bootboxjs.com
Stephen Patten
46

Iniciando o Bootstrap 3 ( edit: ainda o mesmo no Bootstrap 4 ), existem 2 instâncias nas quais você pode disparar eventos, sendo:

1. Quando o evento "ocultar" modal é iniciado

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

2. Quando o evento "ocultar" modal terminar

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

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

aesede
fonte
1
Isso me ajudou a corrigir meu bug modal do Bootstrap, onde adicionaria 15px de preenchimento à direita do corpo ao fechar qualquer modal. Obrigado!
Sam Malayek
2
Bom para mostrar os 2 eventos. Melhor para iniciantes como eu notar que isso precisa ser colocado abaixo do modal para que o evento seja acionado.
21417 Lynnell Emmanuel Neri
18

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

Usar:

$(document).on('hidden.bs.modal', '#Control_id', function (event) {
// code to run on closing
});
Oscar
fonte
1
É assim que você deve fazer se o modal for adicionado dinamicamente. Economizou-me uma tonelada de tempo.
Dylan Vander Berg
15
$(document.body).on('hidden.bs.modal', function () {
    $('#myModal').removeData('bs.modal')
});
SUNny.K
fonte
6

O Bootstrap fornece eventos que você pode conectar ao modal , como se você deseja acionar um evento quando o modal terminar de ser oculto ao usuário, você pode usar oevento hidden.bs.modal como este

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

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

Subodh Ghulaxe
fonte
4

Bootstrap 4:

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

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

hidden.bs.modal : este evento é acionado quando o modal termina de ser oculto ao usuário (aguardará a conclusão das transições CSS).

sendon1982
fonte
Este caminho também é válido para o BS3. Por favor, veja a resposta aceita da maneira BS2 (obsoleta).
Roland
3

Eu faria assim:

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

O resto já foi escrito por outros. Também recomendo a leitura da documentação: jquery - on method

tkartas
fonte
2

Eu já vi muitas respostas sobre os eventos de autoinicialização, como hide.bs.modalquais são acionados quando o modal é fechado.

Há um problema com esses eventos: quaisquer pop-ups no modal (popovers, dicas de ferramentas etc.) acionarão esse evento.

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

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

O Bootstrap usa a inclasse quando o modal está aberto. É muito importante usar o hiddenevento, pois a classe inainda está definida quando o evento hideé acionado.

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

Tortus
fonte
2

Eu estava tendo os mesmos problemas que alguns com

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

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

Michael Granger
fonte
De fato. É bom que você tenha mencionado que ele precisa ser colocado abaixo do modal para disparar o evento.
Lynnell Emmanuel Neri
Eu definiria as regras um pouco mais rígidas que isso. Quando o seletor jQuery $("#myModal")é chamado, o elemento HTML com um ID de myModalnecessidades deve existir no DOM. Portanto, você pode ter esse código na parte superior da página, mas colocado em uma $(document).on("ready", function(){ ... });(ou função similar chamada após o DOM ser preenchido com o elemento).
Andy Gee
0

se você deseja disparar uma função em cada fechamento modal, você pode usar este método,

$(document).ready(function (){
    $('.modal').each(function (){
        $(this).on('hidden.bs.modal', function () {
            //fires when evey popup close. Ex. resetModal();
        });
    });
});

Portanto, você não precisa especificar IDs modais sempre.

Sahan
fonte