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


179

Раньше я использовал диалоговое окно 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!");
});

3
shown.bs.modalСобытие происходит, когда HTML-документ содержит хотя бы <div class="modal fade"><div class="modal-dialog"></div></div>структуру.
Химический Программист


Приветствую комментарий @Chemical Programmer, он должен появиться с ответом
Тарек

Ответы:


332

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

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


17
Используйте $("#code").on("shown.bs.modal", function(e) {})для начальной загрузки 3.0.
teewuane

обязательно учтите, что Chemical Programmer сказал о необходимости структуры <div class = "modal fade"> <div class = "modal-dialog"> </ div> </ div>, по крайней мере, для вызова этого кода
Whyoz

1
#codeОтносится к селектору JQuery, один из основных ингредиентов для JQuery: w3schools.com/jquery/jquery_selectors.asp
DDW

Я использую $(document).on("shown.bs.modal", ...для общего прослушивания
vladkras

1
По крайней мере, показанный.bs.modal фактически выполняется до того, как будет показан модальный. Это не проблема в моем случае, но может быть полезно знать.
Джонни

86

не будет работать .. использовать $(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 ("Я хочу, чтобы это появилось после открытия модального окна!");} У меня не работало, но $ (window) сработало !! Спасибо @viper_tkd
Крутал Моди

1
Мне нужно было привязать к ЛЮБОМУ модальному режиму, который открывался / закрывался, а не конкретным селектором. Этот ответ хорошо сработал для меня в этом случае.
Джозеф

Это работает до полной загрузки модального режима в GUI. Я хочу взять данные из моего модального режима после загрузки модального типа - этот метод возвращает «неопределенное» для всего, потому что модальный GUI еще не существует, поэтому поля и все остальное еще не запрашиваются. (не видно)
FrenkyB

Это сработало для меня, но я добавил проверку в обработчике для нацеливания на один конкретный модал: if( $('#code').is( e.relatedTarget ) ) { ... }так как у меня было несколько на странице.
allicarn

Спасибо за правильное имя события, но нет необходимости заменять идентификатор элемента на $ (окно). Использование bs4 с jquery 3.4.
Jcc.Sanabria

17

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

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

9

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

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

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
        });
});

-4

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

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

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

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

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


7
подражать снова ... см. другие ответы пользователя
Laurent B
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.