Chamando uma Função no Modal de Inicialização Aberta

179

Eu costumava usar a caixa de diálogo da UI do JQuery, e tinha a openopçã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">&times;</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!");
});
Mohamed Khamis
fonte
3
shown.bs.modalO evento ocorre quando o documento HTML contém pelo menos <div class="modal fade"><div class="modal-dialog"></div></div>estrutura.
Programador químico
Cumprimente o comentário @Chemical Programmer, ele deve aparecer com a resposta
Tarek

Respostas:

331

Você pode usar o evento / evento mostrado com base no que você precisa:

$( "#code" ).on('shown', function(){
    alert("I want this to appear after the modal has opened!");
});

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:

$('#code').on('shown.bs.modal', function (e) {
  // do something...
})

Veja os documentos do Bootstrap 3.0 aqui em "Eventos".

Arun P Johny
fonte
17
Use $("#code").on("shown.bs.modal", function(e) {})para o bootstrap 3.0.
Janelas
certifique-se de levar em consideração o que o programador químico disse sobre a necessidade da estrutura <div class = "modal fade"> <div class = "modal-dialog"> </div> </div> pelo menos para que esse código seja chamado
whyoz
1
A #coderefere-se ao selector jQuery, um dos ingredientes básicos para jQuery: w3schools.com/jquery/jquery_selectors.asp
DDW
Eu uso $(document).on("shown.bs.modal", ...para ouvir geral
vladkras
1
Pelo menos o mostrado.bs.modal realmente é executado antes que o modal seja mostrado. Isso não é um problema no meu caso, mas pode ser bom saber.
Jonny
86

não vai funcionar .. use em $(window)vez disso

Para mostrar

$(window).on('shown.bs.modal', function() { 
    $('#code').modal('show');
    alert('shown');
});

Para Esconder

$(window).on('hidden.bs.modal', function() { 
    $('#code').modal('hide');
    alert('hidden');
});
viper_tkd
fonte
5
$ ("#modal") .on ('mostrado', function () {alert ("Quero que apareça após a abertura do modal!");} Não estava funcionando para mim, mas $ (window) funcionou !! Obrigado @viper_tkd
Krutal Modi
1
Eu precisava vincular a QUALQUER modal que fosse aberto / fechado, e não por um seletor específico. Essa resposta funcionou bem para mim nesse caso.
jyoseph
Isso funciona antes que o modal seja totalmente carregado na GUI. Eu quero pegar dados do meu modal após o modal ser carregado - esse método retorna 'indefinido' para tudo porque a GUI modal ainda não existe, portanto, os campos e todo o resto ainda não podem ser consultados. (não visível)
FrenkyB
Isso funcionou para mim, mas eu adicionei uma verificação no manipulador para segmentar um modal específico: if( $('#code').is( e.relatedTarget ) ) { ... }já que eu tinha vários na página.
allicarn
Obrigado pelo nome correto do evento, mas não há necessidade de substituir o ID do elemento por $ (janela). Usando bs4 com jquery 3.4.
Jcc.Sanabria 20/02
17

você pode usar em showvez de shownfazer a função carregar imediatamente antes da abertura modal, em vez de depois da abertura modal.

$('#code').on('show.bs.modal', function (e) {
  // do something...
})
Atchyut Nagabhairava
fonte
9

O modal de bootstrap expõe eventos. Ouça o shownevento como este

$('#my-modal').on('shown', function(){
  // code here
});
Josnidhin
fonte
0

se alguém ainda tiver um problema, a única coisa que funcionará perfeitamente para mim usando (loaded.bs.modal):

 $('#editModal').on('loaded.bs.modal', function () {
       console.log('edit modal loaded');

       $('.datepicker').datepicker({
            dateFormat: 'yy-mm-dd',
            clearBtn: true,
            rtl: false,
            todayHighlight: true,
            toggleActive: true,
            changeYear: true,
            changeMonth: true
        });
});
Erose
fonte
-4

Você pode usar o código belw para mostrar e ocultar o modelo de inicialização.

$('#my-model').on('shown.bs.modal', function (e) {
  // do something here...
})

e se você deseja ocultar o modelo, pode usar o código abaixo.

$('#my-model').on('hidden.bs.modal', function() {
    // do something here...
});

Espero que esta resposta seja útil para o seu projeto.

Gaurang Sondagar
fonte
7
copycat novamente ... veja as outras respostas dos usuários
Laurent B