Eu costumava usar a caixa de diálogo da UI do JQuery, e tinha a open
opção, onde você pode especificar algum código Javascript para executar quando a caixa de diálogo for aberta. Eu teria usado essa opção para selecionar o texto na caixa de diálogo usando uma função que tenho.
Agora eu quero fazer isso usando o modal do bootstrap. Abaixo está o código HTMl:
<div id="code" class="modal hide fade">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3>Modal header</h3>
</div>
<div class="modal-body">
<pre>
print 'Hello World'
E quanto ao botão que abre o modal:
<a href="#code" data-toggle="modal" class="btn code-dialog">Display code</a>
Tentei usar um ouvinte ao clicar no botão, mas a mensagem de alerta foi exibida antes do modal aparecer:
$( ".code-dialog" ).click(function(){
alert("I want this to appear after the modal has opened!");
});
javascript
jquery
jquery-ui
twitter-bootstrap
modal-dialog
Mohamed Khamis
fonte
fonte
shown.bs.modal
O evento ocorre quando o documento HTML contém pelo menos<div class="modal fade"><div class="modal-dialog"></div></div>
estrutura.Respostas:
Você pode usar o evento / evento mostrado com base no que você precisa:
Demonstração: Plunker
Atualização para o Bootstrap 3.0
Para o Bootstrap 3.0, você ainda pode usar o evento mostrado, mas o usaria assim:
Veja os documentos do Bootstrap 3.0 aqui em "Eventos".
fonte
$("#code").on("shown.bs.modal", function(e) {})
para o bootstrap 3.0.#code
refere-se ao selector jQuery, um dos ingredientes básicos para jQuery: w3schools.com/jquery/jquery_selectors.asp$(document).on("shown.bs.modal", ...
para ouvir geralnão vai funcionar .. use em
$(window)
vez dissoPara mostrar
Para Esconder
fonte
if( $('#code').is( e.relatedTarget ) ) { ... }
já que eu tinha vários na página.você pode usar em
show
vez deshown
fazer a função carregar imediatamente antes da abertura modal, em vez de depois da abertura modal.fonte
O modal de bootstrap expõe eventos. Ouça o
shown
evento como estefonte
se alguém ainda tiver um problema, a única coisa que funcionará perfeitamente para mim usando (loaded.bs.modal):
fonte
Você pode usar o código belw para mostrar e ocultar o modelo de inicialização.
e se você deseja ocultar o modelo, pode usar o código abaixo.
Espero que esta resposta seja útil para o seu projeto.
fonte