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

124

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

Теперь я хочу сделать это, используя bootstrap modal. Ниже приведен код 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!");
});
  • 2
    Событие shown.bs.modal происходит, когда HTML-документ содержит как минимум <div class="modal fade"><div class="modal-dialog"></div></div>
  • 0
    дублировать stackoverflow.com/questions/12190119/bootstrap-modal-show-event
Теги:
modal-dialog

7 ответов

259
Лучший ответ

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

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

  • 13
    Используйте $("#code").on("shown.bs.modal", function(e) {}) для начальной загрузки 3.0.
  • 0
    Обязательно примите во внимание то, что сказал Chemical Programmer о необходимости структуры <div class = "modal fade"> <div class = "modal-dialog"> </ div> </ div>, по крайней мере, для вызова этого кода.
Показать ещё 8 комментариев
61

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

//ДЛЯ ПОКАЗА

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

//ДЛЯ СКРЫТИЯ

$(window).on('hidden.bs.modal', function() { 
    $('#code').modal('hide');
    alert('hidden');
});
  • 5
    $ ("#modal") .on ('показано', function () {alert ("Я хочу, чтобы это появилось после открытия модального окна!");} У меня не работало, но $ (окно) сработало !! Спасибо @viper_tkd
  • 1
    Мне нужно было привязать к ЛЮБОМУ модальному режиму, который открывался / закрывался, а не конкретным селектором. Этот ответ хорошо сработал для меня в этом случае.
Показать ещё 2 комментария
8

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

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

Модификация Bootstrap вызывает события. Слушайте событие shown, подобное этому

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

Нашел другой ответ на github: $(document).on('show.bs.modal, function(){})

0

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

Вы можете использовать код belw для show и скрывать модель начальной загрузки.

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

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

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

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

  • 5
    подражать снова ... посмотреть другие ответы пользователя
  • 0
    Эй, Лоран Б, почему ты так поступаешь, чтобы записать все мои ответы? дай мне переиграть ..

Ещё вопросы

Сообщество Overcoder
Наверх
Меню