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:none
e adicione console.log("THE MODAL CLOSED");
à função acima quando eu fechar, nada acontece.
fonte
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.$('#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.Bootstrap 4
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
fonte
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
2. Quando o evento "ocultar" modal terminar
Ref: http://getbootstrap.com/javascript/#js-events
fonte
Em vez de "ao vivo", você precisa usar o evento "on", mas atribuí-lo ao objeto de documento:
Usar:
fonte
fonte
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
Verifique aqui um violino de trabalho, leia mais sobre métodos e eventos modais aqui em Documentação
fonte
Bootstrap 4:
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).
fonte
Eu faria assim:
O resto já foi escrito por outros. Também recomendo a leitura da documentação: jquery - on method
fonte
Eu já vi muitas respostas sobre os eventos de autoinicialização, como
hide.bs.modal
quais 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.
O Bootstrap usa a
in
classe quando o modal está aberto. É muito importante usar ohidden
evento, pois a classein
ainda está definida quando o eventohide
é acionado.Esta solução não funcionará no IE8, pois o IE8 não suporta o
:not()
seletor Jquery .fonte
Eu estava tendo os mesmos problemas que alguns com
Você precisa colocá-lo na parte inferior da página, colocando-o no topo nunca aciona o evento.
fonte
$("#myModal")
é chamado, o elemento HTML com um ID demyModal
necessidades 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).se você deseja disparar uma função em cada fechamento modal, você pode usar este método,
Portanto, você não precisa especificar IDs modais sempre.
fonte