Gọi một chức năng trên phương thức bootstrap mở

Tôi đã từng sử dụng hộp thoại của JQuery UI và nó có opentùy chọn, nơi bạn có thể chỉ định một số mã Javascript để thực thi khi hộp thoại được mở. Tôi đã sử dụng tùy chọn đó để chọn văn bản trong hộp thoại bằng chức năng tôi có.

Bây giờ tôi muốn làm điều đó bằng cách sử dụng phương thức của bootstrap. Dưới đây là mã 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'

Và đối với nút mở chế độ:

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

Tôi đã cố gắng sử dụng một trình nghe onclick của nút, nhưng thông báo cảnh báo đã được hiển thị trước khi phương thức xuất hiện:

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

Bạn có thể sử dụng sự kiện được hiển thị / sự kiện hiển thị dựa trên những gì bạn cần:

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

Bản trình diễn: Plunker

Cập nhật cho Bootstrap 3.0

Đối với Bootstrap 3.0, bạn vẫn có thể sử dụng sự kiện được hiển thị nhưng bạn sẽ sử dụng nó như thế này:

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

Xem tài liệu Bootstrap 3.0 tại đây trong "Sự kiện".

sẽ không hoạt động .. sử dụng $(window) thay thế

Để hiển thị

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

Để che giấu

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

bạn có thể sử dụng showthay vì shownđể thực hiện chức năng tải ngay trước khi mở chế độ, thay vì sau khi mở chế độ.

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

Phương thức Bootstrap phơi bày các sự kiện. Nghe shownsự kiện như thế này

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

nếu ai đó vẫn gặp sự cố, điều duy nhất hoạt động hoàn hảo với tôi bằng cách sử dụng (oad.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
        });
});

Bạn có thể sử dụng mã belw để hiển thị và ẩn mô hình bootstrap.

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

và nếu bạn muốn ẩn mô hình thì bạn có thể sử dụng mã bên dưới.

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

Tôi hy vọng câu trả lời này hữu ích cho dự án của bạn.