Eu costumava usar o diálogo JQuery UI's, e tinha a opção open
, onde você pode especificar algum código Javascript para executar uma vez que o diálogo é aberto. Eu teria utilizado essa opção para selecionar o texto dentro da caixa de diálogo utilizando uma função que eu tenho.
Agora eu quero fazer isso usando o modal bootstrap's. 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'
</pregt;
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 onclick listenener do botão, mas a mensagem de alerta foi exibida antes do aparecimento do modal:
$( ".code-dialog" ).click(function(){
alert("I want this to appear after the modal has opened!");
});
Você pode usar o evento mostrado/show evento baseado no que você precisa:
$( "#code" ).on('shown', function(){
alert("I want this to appear after the modal has opened!");
});
Demonstração: Plunker
Para o Bootstrap 3.0 você ainda pode usar o evento mostrado, mas você o usaria desta forma:
$('#code').on('shown.bs.modal', function (e) {
// do something...
})
Veja o Bootstrap 3.0 docs aqui em " Events".
não vai funcionar... utilize $(janela)
em vez disso
//PARA PROGRAMAÇÃO
$(window).on('shown.bs.modal', function() {
$('#code').modal('show');
alert('shown');
});
//PARA ESCONDER
$(window).on('hidden.bs.modal', function() {
$('#code').modal('hide');
alert('hidden');
});