it-swarm.com.ru

Вызов функции при загрузке модального открытия

Раньше я использовал диалоговое окно JQuery UI, и у него была опция 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>

Я попытался использовать кнопку прослушивания кнопки, но появилось предупреждающее сообщение до того появился модал:

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

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

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

Демо: Плункер

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

Для Bootstrap 3.0 вы все еще можете использовать показанное событие, но вы бы использовали его так:

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

Смотрите документацию по Bootstrap 3.0 здесь в разделе «События».

261
Arun P Johny

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

// ДЛЯ ПОКАЗАНИЯ

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

// для сокрытия

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

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

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

Bootstrap модал выставляет события. Послушайте событие shown, как это

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

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