Como lidar com o evento de fechamento modal no Twitter Bootstrap?


191

No Twitter, observando a documentação dos modais . Não consegui descobrir se há uma maneira de ouvir o evento close do modal e executar uma função.

por exemplo, vamos usar este modal como exemplo:

<div class="modal-header">
    <button type="button" class="close close_link" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h3>Modal header</h3>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
    <a href="#" class="btn close_link" data-dismiss="modal">Close</a>   
</div>

O botão X na parte superior e o botão fechar na parte inferior podem ocultar / fechar o modal por causa de data-dismiss="modal". Então, eu me pergunto, se eu pudesse de alguma forma ouvir isso?

Alternativamente, eu poderia fazê-lo manualmente assim, eu acho ...

$("#salesitems_modal").load(url, data, function() { 
     $(this).modal('show'); 
     $(this).find(".close_link").click(modal_closing);
});

O que você acha?


Respostas:


369

Atualizado para o Bootstrap 3 e 4

Os documentos Bootstrap 3 e Bootstrap 4 referem-se a dois eventos que você pode usar.

hide.bs.modal : este evento é acionado imediatamente quando o método da instância hide foi chamado.
hidden.bs.modal : esse evento é acionado quando o modal termina de ser oculto ao usuário (aguardará a conclusão das transições CSS).

E forneça um exemplo de como usá-los:

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

Resposta do Legacy Bootstrap 2.3.2

A documentação do Bootstrap refere-se a dois eventos que você pode usar.

hide : este evento é acionado imediatamente quando o método da instância hide foi chamado.
oculto : este evento é acionado quando o modal termina de ser oculto do usuário (aguardará a conclusão das transições de css).

E fornece um exemplo de como usá-los:

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

1
Por alguma razão, isso está sendo disparado para mim também quando clico no botão que tenho no modal. E quando eu envio um formulário no modal (mesmo antes do evento onSubmit ser acionado). Alguém sabe como parar esse comportamento?
cara

2
Para fornecer um contexto extra, eu recomendaria o uso de $ (document) .on ('hidden', '#myModal', function () {// faça algo}); para impedir que isso não funcione em determinadas situações, como quando isso está contido em uma declaração de função $ (document) .ready.
precisa saber é o seguinte

Olá, eu quero aplicar modal jquery oculto. e apliquei o mesmo código no meu projeto, mas ele não está funcionando. Você tem alguma sugestão para o mesmo?
precisa

@HardiShah, você deve fazer uma nova pergunta, incluindo seu código e / ou erros.
Albertedevigo 06/11/19

67

Se sua div modal for adicionada dinamicamente, use (Para inicialização 3)

$(document).on('hide.bs.modal','#modal-id', function () {
                alert('');
 //Do stuff here
});

Isso funcionará também para conteúdo não dinâmico.


diferença entre hide vs hidden ??
Mahi

3
O evento @mahi .hide é acionado, imediatamente quando o método da instância hide foi chamado. enquanto o evento oculto é acionado quando o modal termina de ser oculto do usuário (aguardará a conclusão das transições CSS).
Confuso

18

Existem dois pares de eventos modais, um é "show" e "mostrado", o outro é "hide" e "hidden". Como você pode ver pelo nome, oculte disparos de eventos quando o modal estiver próximo do fim, como clicar na cruz no canto superior direito ou no botão Fechar ou assim por diante. Enquanto oculto é acionado depois que o modal é realmente fechado. Você pode testar esses eventos você mesmo. Por exemplo:

$( '#modal' )
   .on('hide', function() {
       console.log('hide');
   })
   .on('hidden', function(){
       console.log('hidden');
   })
   .on('show', function() {
       console.log('show');
   })
   .on('shown', function(){
      console.log('shown' )
   });

E, quanto à sua pergunta, acho que você deve ouvir o evento 'hide' do seu modal.


1

Eventos Modais de Bootstrap:

  1. hide.bs.modal => Ocorre quando o modal está prestes a ser oculto.
  2. hidden.bs.modal => Ocorre quando o modal está totalmente oculto (após a transição das CSS).
<script type="text/javascript">
    $("#salesitems_modal").on('hide.bs.modal', function () {
        //actions you want to perform after modal is closed.
    });
</script>

Espero que isso ajude.

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.