Eu já vi algumas perguntas em relação aos modais de autoinicialização, mas nenhuma exatamente como essa, então vou adiante.
Eu tenho um modal que eu chamo de onclick assim ...
$(".modal-link").click(function(event){
$("#modal-content").modal('show');
});
Isso funciona bem, mas quando eu mostro o modal, quero focar no primeiro elemento de entrada ... Nesse caso, o primeiro elemento de entrada tem um ID de #photo_name.
Então eu tentei
$(".modal-link").click(function(event){
$("#modal-content").modal('show');
$("input#photo_name").focus();
});
Mas isso não adiantou. Por fim, tentei vincular o evento 'show', mas, mesmo assim, a entrada não será focada. Por fim, apenas para teste, como eu suspeitava que fosse sobre a ordem de carregamento do js, coloquei um setTimeout apenas para ver se eu atraso um segundo, o foco funcionará e, sim, funciona! Mas esse método é obviamente uma porcaria. Existe alguma maneira de ter o mesmo efeito que abaixo sem usar um setTimeout?
$("#modal-content").on('show', function(event){
window.setTimeout(function(){
$(event.currentTarget).find('input#photo_name').first().focus()
}, 0500);
});
fonte
Só queria dizer que o Bootstrap 3 lida com isso de maneira um pouco diferente. O nome do evento é "mostrado.bs.modal".
ou concentre-se na primeira entrada visível como esta:
http://getbootstrap.com/javascript/#modals
fonte
Estou usando isso no meu layout para capturar todos os modais e focar na primeira entrada
fonte
$(this).find('input:visible').focus();
Eu tive o mesmo problema com o bootstrap 3, foco quando clico no link, mas não quando acionar o evento com javascript. A solução:
Provavelmente é algo sobre a animação!
fonte
Eu tive problema para pegar o evento "shows.bs.modal" .. E esta é a minha solução que funciona perfeita ..
Em vez simples, em ():
Use on () com elemento delegado:
fonte
Parece que a animação modal está ativada (
fade
na classe da caixa de diálogo), após chamar.modal('show')
, a caixa de diálogo não fica imediatamente visível e, portanto, não é possível obter o foco no momento.Posso pensar em duas maneiras de resolver esse problema:
fade
da classe, para que a caixa de diálogo fique imediatamente visível após a chamada.modal('show')
. Você pode ver http://codebins.com/bin/4ldqp7x/4 para obter uma demonstração. (Desculpe, @keyur, editei e salvei por engano como nova versão do seu exemplo)focus()
parashown
eventos como o que o @keyur escreveu.fonte
Criei uma maneira dinâmica de chamar cada evento automaticamente. É perfeito para focar um campo, porque ele chama o evento apenas uma vez, removendo-o após o uso.
Você só precisa chamar o
modalEvents()
documento pronto.Usar:
Portanto, você pode usar o mesmo modal para carregar o que deseja, sem se preocupar em remover eventos sempre.
fonte
Eu tive o mesmo problema com o bootstrap 3 e resolvi assim:
fonte
O Bootstrap adicionou um evento carregado.
https://getbootstrap.com/docs/3.3/javascript/#modals
capturar o evento 'loaded.bs.modal' no modal
fonte
Evento de apresentação modal de inicialização
})
fonte
Uma solução um pouco mais limpa e mais modular pode ser:
Ou use seu ID como exemplo:
Espero que ajude..
fonte