Вызов функции на bootstrap modal open

я использовал диалог jQuery UI, и у него было open опция, где вы можете указать некоторый код Javascript для выполнения после открытия диалога. Я бы использовал эту опцию для выбора текста в диалоговом окне, используя функцию, которую я имею.

теперь я хочу сделать это, используя модальный bootstrap. Ниже приведен 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!");
});
123
javascript jquery jquery-ui modal-dialog twitter-bootstrap

5 ответов

можно использовать показано событие / показать событие на основе того, что вам нужно:

$( "#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 здесь в разделе "События".

238

не будет работать.. использовать $(window) вместо

//ДЛЯ ПОКАЗА

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

/ / ДЛЯ HIDDING

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

Bootstrap modal предоставляет события. Прислушайтесь к shown событие

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

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

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

вы можете использовать код belw для показа и скрытия модели bootstrap.

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

и если вы хотите, чтобы скрыть модель, то вы можете использовать ниже код.

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

Я надеюсь, что этот ответ полезен для вашего проекта.

-4