Bootstrap kipinde açık bir işlevi çağırmak

JQuery UI iletişim kutusunu kullandım openve iletişim kutusu açıldıktan sonra yürütmek için bazı Javascript kodunu belirtebileceğiniz bir seçenek vardı . Sahip olduğum bir işlevi kullanarak iletişim kutusundaki metni seçmek için bu seçeneği kullanırdım.

Şimdi bunu bootstrap modelini kullanarak yapmak istiyorum. HTMl kodu aşağıdadır:

<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'

Ve kipi açan düğmeye gelince:

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

Düğmenin onclick dinleyicisini kullanmaya çalıştım, ancak mod mesajı görünmeden önce uyarı mesajı görüntülendi :

$( ".code-dialog" ).click(function(){
    alert("I want this to appear after the modal has opened!");
});

Sen kullanabilirsiniz gösterilen olay neye ihtiyacınız dayalı / gösteri olayı:

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

Gösteri: Plunker

Bootstrap 3.0 Güncelleştirmesi

Bootstrap 3.0 için gösterilen etkinliği kullanmaya devam edebilirsiniz, ancak şu şekilde kullanabilirsiniz:

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

"Events" bölümündeki Bootstrap 3.0 belgelerine bakın .

çalışmaz .. $(window)bunun yerine kullanın

Göstermek için

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

Saklanmak için

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

Kullanabileceğiniz showyerine shownyerine kalıcı açık sonrası, sadece modal açık önce yüke işlevini yapmak için.

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

Bootstrap modal olayları ortaya çıkarır. shownBöyle olayı dinleyin

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

birisinin hala bir sorunu varsa, (loaded.bs.modal) kullanarak benim için mükemmel çalışan tek şey:

 $('#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
        });
});

Bootstrap modelini göstermek ve gizlemek için belw kodunu kullanabilirsiniz.

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

ve eğer modeli gizlemek istiyorsanız aşağıdaki kodu kullanabilirsiniz.

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

Umarım bu cevap projeniz için yararlıdır.