Bootstrap modal montrent les événements

Question

J'ai vu un couple de questions en ce qui concerne l'amorçage des modaux, mais aucun n'est exactement comme cela, alors je vais aller de l'avant.

J'ai un modal que j'appelle onclick comme si...

$(".modal-link").click(function(event){
  $("#modal-content").modal('show');
});

Cela fonctionne bien, mais quand je montre le modal, je veux me concentrer sur le premier élément d'entrée... En mai dernier cas, le premier élément d'entrée a une id #photo_name.

J'ai donc essayé

   $(".modal-link").click(function(event){
     $("#modal-content").modal('show');
     $("input#photo_name").focus();
   });

Mais ce fut en vain. Enfin, j'ai essayé de liaison pour le "show" de l'événement mais tout de même, l'entrée ne sera pas concentrer. Enfin juste pour le test, j'ai eu une suspiscion c'est à propos de la js ordre de chargement, je l'ai mis dans un setTimeout, juste pour voir si j'ai un retard d'une seconde, l'accent de travail, et oui, ça marche!!! Mais cette méthode est évidemment la merde. Est-il possible d'avoir le même effet que ci-dessous sans l'aide d'un setTimeout?

  $("#modal-content").on('show', function(event){
    window.setTimeout(function(){
      $(event.currentTarget).find('input#photo_name').first().focus()
    }, 0500);
  });

Answer 1

Essayez ceci

Voici la vieille DEMO:

EDIT : (Voici un travail de démo avec 3 Bootstrap et jQuery 1.8.3).)

Départ 3 bootstrap besoin d’utiliser l’événement shown.bs.modal :

Answer 2

Je voulais juste dire que Bootstrap 3 gère cela un peu différemment. Le nom de l’événement est « shown.bs.modal ».

ou mettre l’accent sur la première entrée visible comme ceci :

http://GetBootstrap.com/JavaScript/#modals

Answer 3

J’utilise cela dans ma mise en page pour capturer tous les modals et mettre l’accent sur la première entrée

Answer 4

J’ai eu le même problème avec « bootstrap » 3, mise au point lorsque je clique sur le lien, mais pas quand déclencher l’événement avec javascript. La solution :

Sans doute it´s quelque chose à propos de l’animation !

Answer 5

Semble que c'est à cause modal animation est activée (fade dans la catégorie de la boîte de dialogue), après l'appel de .modal('show'), le dialogue n'est pas immédiatement visible, donc il ne peut pas faire l'accent, à ce moment.

Je pense à deux façons de résoudre ce problème:

1. Retirez fade de la classe, de sorte que le dialogue est visible immédiatement après l'appel de .modal('show'). Vous pouvez voir http://codebins.com/bin/4ldqp7x/4 pour la démo. (Désolé @keyur, j'ai malencontreusement éditées et sauvegardées comme de nouvelles version de votre exemple)
2. Appelez focus() en shown événement comme quoi @keyur écrit.