Виклик функції в режимі завантаження модально відкритим

Раніше я користувався діалоговим вікном інтерфейсу JQuery, і він мав openопцію, де можна вказати якийсь код Javascript, який потрібно виконати після відкриття діалогового вікна. Я б використав цю опцію для вибору тексту в діалоговому вікні, використовуючи функцію, яку я маю.

Тепер я хочу це зробити, використовуючи модаль завантаження. Нижче наведено код 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 href="#code" data-toggle="modal" class="btn code-dialog">Display code</a>

Я спробував використати прослуховувач кнопки onclick, але повідомлення попередження відображалося ще до появи модалу:

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

Ви можете використовувати показану подію / подію на основі того, що вам потрібно:

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

Демо: Plunker

Оновлення для Bootstrap 3.0

Для Bootstrap 3.0 ви все ще можете використовувати показану подію, але ви будете використовувати її так:

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

Дивіться документи Bootstrap 3.0 тут у розділі "Події".

не буде працювати .. використовувати $(window) замість цього

Для показу

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

Для приховування

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

ви можете використовувати showзамість того, shownщоб зробити функцію для завантаження безпосередньо перед модальним відкриттям, а не після модального відкритого.

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

Модальний завантажувач розкриває події. Слухайте shownподію, як це

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

якщо у когось все-таки є проблема, єдине, що працює для мене ідеально, використовуючи (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
        });
});

Ви можете використовувати Belw код для показу та приховування завантажувальної моделі.

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

і якщо ви хочете приховати модель, тоді ви можете використовувати код нижче.

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

Я сподіваюся, що ця відповідь буде корисною для вашого проекту.