kzen.dev
Mai mult
Question

Apelarea unei funcții pe bootstrap modal deschide

Am folosit pentru a utiliza JQuery UI's de dialog, și a avut "deschis" opțiune, în cazul în care aveți posibilitatea să specificați un cod Javascript pentru a executa o dată la dialog este deschis. Mi-ar fi folosit această opțiune pentru a selecta textul în caseta de dialog folosind o funcție trebuie.

Acum vreau să fac asta folosind bootstrap's modal. Mai jos este codul 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'

Si pentru ca butonul care deschide modal:

 <a href="#code" data-toggle="modal" class="btn code-dialog">Display code</a>

Am încercat să folosesc un onclick ascultător de buton, dar mesajul de alertă a fost afișat înainte modal apărut:

$( ".code-dialog" ).click(function(){
    alert("I want this to appear after the modal has opened!");
});
Programare
modal-dialog
javascript
jquery
jquery-ui
twitter-bootstrap
Solution / Answer

Puteți utiliza aratat eveniment/spectacol eveniment bazat pe ceea ce ai nevoie:

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

Demo: Plunker

Update pentru Bootstrap 3.0

Pentru Bootstrap 3.0, puteți utiliza în continuare arătat eveniment, dar nu ar folosi astfel:

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

Vezi Bootstrap 3.0 docs aici sub "Evenimente".

Vibhor
Vibhor
Răspuns editat 23 octombrie 2019 в 8:51
295

nu va funcționa.. utilizarea $(fereastra) în loc

//PENTRU A ARĂTA

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

//PENTRU CEI CARE SE ASCUND

$(window).on('hidden.bs.modal', function() { 
    $('#code').modal('hide');
    alert('hidden');
});
73

puteți utiliza "spectacol" în loc de "indicat" pentru a face funcția de a încărca înainte de modal deschide, în loc de după modal deschide.

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

Bootstrap modal expune evenimente. Asculta pentru a "indicat" astfel de eveniment

$('#my-modal').on('shown', function(){
  // code here
});
8

dacă cineva mai are o problema singurul lucru care funcționează perfect pentru mine de a găsi (încărcate.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
        });
});
1

Puteți utiliza belw cod pentru a afișa și a ascunde bootstrap model.

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

și, dacă doriți pentru a ascunde modelul, apoi puteți folosi codul de mai jos.

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

Sper că acest răspuns este utilă pentru proiectul dumneavoastră.

-4
Comunități asemănătoare 1
JavaScript, România - Moldova
288 utilizatori
Comunitatea Română JavaScript: github.com/js-ro Pentru confort, opriți notificările. Parteneri: @php_ro, @python_ro, @devops_ro, @seo_ro Offtop: @holywars_ro