Widziałem kilka pytań dotyczących modów bootstrap, ale nie dokładnie tak, więc pójdę dalej.
Mam modal, który nazywam kliknięciem tak ...
$(".modal-link").click(function(event){
$("#modal-content").modal('show');
});
Działa to dobrze, ale kiedy pokazuję modal, chcę skupić się na pierwszym elemencie wejściowym ... Może pierwszy element wejściowy ma identyfikator #photo_name.
Więc próbowałem
$(".modal-link").click(function(event){
$("#modal-content").modal('show');
$("input#photo_name").focus();
});
Ale to nie pomogło. Wreszcie próbowałem powiązać zdarzenie „show”, ale mimo to dane wejściowe nie będą się koncentrować. Na koniec tylko do testowania, ponieważ miałem suspiscion, chodzi o kolejność ładowania js, ustawiłem setTimeout, aby zobaczyć, czy opóźnię sekundę, czy fokus zadziała i tak, działa! Ale ta metoda jest oczywiście bzdura. Czy jest jakiś sposób na uzyskanie takiego samego efektu jak poniżej bez użycia setTimeout?
$("#modal-content").on('show', function(event){
window.setTimeout(function(){
$(event.currentTarget).find('input#photo_name').first().focus()
}, 0500);
});
Chciałem tylko powiedzieć, że Bootstrap 3 traktuje to nieco inaczej. Nazwa zdarzenia to „pokazano.bs.modal”.
lub skoncentruj się na pierwszym widocznym wejściu w ten sposób:
http://getbootstrap.com/javascript/#modals
źródło
Używam tego w moim układzie do przechwytywania wszystkich modów i skupienia się na pierwszym wejściu
źródło
$(this).find('input:visible').focus();
Miałem ten sam problem z bootstrap 3, skupiałem się, kiedy klikam link, ale nie, gdy wyzwalam zdarzenie za pomocą javascript. Rozwiązanie:
Prawdopodobnie chodzi o animację!
źródło
Miałem problem z złapaniem zdarzenia „pokazano.bs.modal”. I to jest moje rozwiązanie, które działa idealnie ..
Zamiast prostego on ():
Użyj on () z delegowanym elementem:
źródło
Wydaje się, że dzieje się tak, ponieważ animacja modalna jest włączona (
fade
w klasie okna dialogowego), po wywołaniu.modal('show')
okno dialogowe nie jest natychmiast widoczne, więc nie można w tym momencie ustawić ostrości.Mogę wymyślić dwa sposoby rozwiązania tego problemu:
fade
z klasy, aby okno dialogowe było natychmiast widoczne po wywołaniu.modal('show')
. Możesz zobaczyć http://codebins.com/bin/4ldqp7x/4 na demo. (Przepraszamy, @keyur, przez pomyłkę edytowałem i zapisałem jako nową wersję Twojego przykładu)focus()
wshown
przypadku, jak napisał @keyur.źródło
Stworzyłem dynamiczny sposób automatycznego wywoływania każdego zdarzenia. Idealnie jest skupić pole, ponieważ wywołuje zdarzenie tylko raz, usuwając je po użyciu.
Wystarczy zadzwonić
modalEvents()
na gotowy dokument.Posługiwać się:
Możesz więc użyć tego samego modalu, aby załadować to, co chcesz, bez obaw o usuwanie zdarzeń za każdym razem.
źródło
Miałem ten sam problem z bootstrap 3 i rozwiązałem w ten sposób:
źródło
Bootstrap dodał załadowane zdarzenie.
https://getbootstrap.com/docs/3.3/javascript/#modals
przechwytywanie zdarzenia „load.bs.modal” na module
źródło
Modalne zdarzenie pokazujące bootstrap
})
źródło
Trochę czystszym i bardziej modułowym rozwiązaniem może być:
Lub zamiast tego użyj swojego identyfikatora jako przykładu:
Mam nadzieję, że to pomoże ..
źródło