Kiedyś korzystałem z okna dialogowego interfejsu użytkownika JQuery i miałem open
opcję, w której można określić kod JavaScript do wykonania po otwarciu okna dialogowego. Użyłbym tej opcji, aby zaznaczyć tekst w oknie dialogowym za pomocą funkcji, którą mam.
Teraz chcę to zrobić za pomocą modalu bootstrapa. Poniżej kod 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'
A co do przycisku otwierającego modal:
<a href="#code" data-toggle="modal" class="btn code-dialog">Display code</a>
Próbowałem użyć odbiornika onclick przycisku, ale komunikat ostrzegawczy został wyświetlony przed pojawieniem się modalu:
$( ".code-dialog" ).click(function(){
alert("I want this to appear after the modal has opened!");
});
javascript
jquery
jquery-ui
twitter-bootstrap
modal-dialog
Mohamed Khamis
źródło
źródło
shown.bs.modal
zdarzenie występuje, gdy dokument HTML zawiera co najmniej<div class="modal fade"><div class="modal-dialog"></div></div>
strukturę.Odpowiedzi:
Możesz użyć pokazanego wydarzenia / pokazu w zależności od tego, czego potrzebujesz:
Demo: Plunker
Aktualizacja dla Bootstrap 3.0
W przypadku Bootstrap 3.0 nadal możesz użyć pokazanego zdarzenia, ale użyjesz go w następujący sposób:
Zobacz dokumentację Bootstrap 3.0 w sekcji „Zdarzenia”.
źródło
$("#code").on("shown.bs.modal", function(e) {})
dla bootstrap 3.0.#code
Odnosi się do selektora jQuery, jednym z podstawowych składników jQuery: w3schools.com/jquery/jquery_selectors.asp$(document).on("shown.bs.modal", ...
do ogólnego słuchanianie zadziała ... użyj
$(window)
zamiast tegoZa pokazanie
Do ukrycia
źródło
if( $('#code').is( e.relatedTarget ) ) { ... }
ponieważ miałem wiele na stronie.możesz użyć
show
zamiast,shown
aby funkcja ładowała się tuż przed otwarciem modalnym, zamiast po otwarciu modalnym.źródło
Modał Bootstrap ujawnia zdarzenia. Posłuchaj tego
shown
wydarzeniaźródło
jeśli ktoś nadal ma problem jedyną rzeczą, która działa idealnie dla mnie jest użycie (load.bs.modal):
źródło
Możesz użyć kodu belw do pokazania i ukrycia modelu bootstrap.
a jeśli chcesz ukryć model, możesz użyć poniższego kodu.
Mam nadzieję, że ta odpowiedź będzie przydatna w Twoim projekcie.
źródło