Wywołanie funkcji przy otwieraniu modalnym bootstrap

179

Kiedyś korzystałem z okna dialogowego interfejsu użytkownika JQuery i miałem openopcję, 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">&times;</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!");
});
Mohamed Khamis
źródło
3
shown.bs.modalzdarzenie występuje, gdy dokument HTML zawiera co najmniej <div class="modal fade"><div class="modal-dialog"></div></div>strukturę.
Programista chemiczny
Pozdrawiam komentarz @Chemical Programmer, powinien pojawić się przy odpowiedzi
Tarek

Odpowiedzi:

331

Możesz użyć pokazanego wydarzenia / pokazu w zależności od tego, czego potrzebujesz:

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

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:

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

Zobacz dokumentację Bootstrap 3.0 w sekcji „Zdarzenia”.

Arun P Johny
źródło
17
Użyj $("#code").on("shown.bs.modal", function(e) {})dla bootstrap 3.0.
teewuane
upewnij się, że wziąłeś pod uwagę to, co powiedział programista chemiczny o potrzebie struktury <div class = "modal fade"> <div class = "modal-dialog"> </div> </div> przynajmniej do wywołania tego kodu
whyoz
1
#codeOdnosi się do selektora jQuery, jednym z podstawowych składników jQuery: w3schools.com/jquery/jquery_selectors.asp
DDW
Używam $(document).on("shown.bs.modal", ...do ogólnego słuchania
vladkras
1
Przynajmniej show.bs.modal jest faktycznie wykonywane przed wyświetleniem modalu. W moim przypadku nie stanowi to problemu, ale warto wiedzieć.
Jonny
86

nie zadziała ... użyj $(window)zamiast tego

Za pokazanie

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

Do ukrycia

$(window).on('hidden.bs.modal', function() { 
    $('#code').modal('hide');
    alert('hidden');
});
viper_tkd
źródło
5
$ ("#modal") .on ('shown', function () {alert ("Chcę, żeby to się pojawiało po otwarciu modalu!");} Nie działało dla mnie, ale $ (okno) działało !! Dzięki @viper_tkd
Krutal Modi
1
Musiałem powiązać się z DOWOLNYM modalem, który został otwarty / zamknięty, a nie przez określony selektor. W tym przypadku ta odpowiedź działała dobrze.
jyoseph
Działa to zanim modal zostanie w pełni załadowany w GUI. Chcę pobrać dane z mojego modalu po załadowaniu modalu - ta metoda zwraca „undefined” dla wszystkiego, ponieważ modalny GUI jeszcze nie istnieje, więc pola i wszystko inne nie jest jeszcze poddawane zapytaniom. (niewidoczne)
FrenkyB
To zadziałało dla mnie, ale dodałem sprawdzenie w module obsługi, aby wskazać jeden konkretny mod: if( $('#code').is( e.relatedTarget ) ) { ... }ponieważ miałem wiele na stronie.
allicarn
Dziękujemy za prawidłową nazwę zdarzenia, ale nie ma potrzeby zastępowania identyfikatora elementu $ (okno). Używanie bs4 z jquery 3.4.
Jcc.Sanabria
17

możesz użyć showzamiast, shownaby funkcja ładowała się tuż przed otwarciem modalnym, zamiast po otwarciu modalnym.

$('#code').on('show.bs.modal', function (e) {
  // do something...
})
Atchyut Nagabhairava
źródło
9

Modał Bootstrap ujawnia zdarzenia. Posłuchaj tego shownwydarzenia

$('#my-modal').on('shown', function(){
  // code here
});
Josnidhin
źródło
0

jeśli ktoś nadal ma problem jedyną rzeczą, która działa idealnie dla mnie jest użycie (load.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
źródło
-4

Możesz użyć kodu belw do pokazania i ukrycia modelu bootstrap.

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

a jeśli chcesz ukryć model, możesz użyć poniższego kodu.

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

Mam nadzieję, że ta odpowiedź będzie przydatna w Twoim projekcie.

Gaurang Sondagar
źródło
7
znowu naśladowca ... zobacz inne odpowiedzi użytkownika
Laurent B