Я использую модальный пример из загрузочного документа 3. модальные работы. однако мне нужно получить доступ к событию show.bs.modal, когда он срабатывает. пока я просто пытаюсь:
$('#myModal').on('show.bs.modal', function () {
alert('hi')
})
Ничего не происходит, событие не срабатывает. Что я делаю не так??? Для меня это не имеет смысла.
используйте это:
$(document).on('show.bs.modal','#myModal', function () {
alert('hi');
})
Убедитесь, что вы положили свой on('shown.bs.modal'), прежде чем создавать модальный текст.
$("#myModal").on("shown.bs.modal", function () {
alert('Hi');
});
$("#myModal").modal('show'); //This can also be $("#myModal").modal({ show: true });
или
$("#myModal").on("shown.bs.modal", function () {
alert('Hi');
}).modal('show');
Чтобы сфокусироваться на поле, лучше использовать shown.bs.modal вместо show.bs.modal, но, возможно, по другим причинам вы хотите скрыть что-то фон или установить что-то прямо перед началом показа модала, используйте кнопку show.bs.modal.
Оберните свою функцию в $(document).ready(function() { или, проще говоря, $(function() {. В CoffeeScript это будет выглядеть как
$ ->
$('#myModal').on 'show.bs.modal', (event)->
Без него JavaScript выполняется до загрузки документа, а #myModal еще не является частью DOM. Вот ссылка Bootstrap.
Попробуйте это
$('#myModal').on('shown.bs.modal', function () {
alert('hi');
});
Используя shown вместо show, также убедитесь, что у вас есть полные двоеточия в конце вашей функции и предупреждения.
$(document).on('shown.bs.modal','.modal', function () {
/// TODO EVENTS
});
Аналогичная ситуация со мной произошла, и я решил использовать setTimeout.
Bootstrap использует следующий таймаут, чтобы завершить показ:
c.TRANSITION_DURATION = 300, c.BACKDROP_TRANSITION_DURATION = 150,
Поэтому использование более 300 должно работать, и для меня работает 200:
$('#myModal').on('show.bs.modal', function (e) {
setTimeout(function(){
//Do something if necessary
}, 300);
})
У меня была аналогичная, но другая проблема, и я все еще не могу работать, когда я использую $('# myModal'). Я смог заставить его работать, когда я использую $(window).
Моя другая проблема заключается в том, что я обнаружил, что событие show не срабатывает, если я сохранил свой модальный контент div html в переменной javascript, например.
var content="<div id='myModal' ...";
$(content).modal();
$(window).on('show.bs.modal', function (e) {
alert('show test');
});
событие никогда не запускалось, потому что оно не происходило
мое исправление должно было включать divs в тело html
<body>
<div id='myModal'>
...
</div>
<script>
$('#myModal).modal();
$(window).on('show.bs.modal', function (e) {
alert('show test');
});
</script>
</body>
Не забудьте поставить script после вызова "js/bootstrap", а не раньше.
В моем случае я отсутствовал.modal-dialog div
Не срабатывает событие: показано.bs.modal
<div id="loadingModal" class="modal fade">
<p>Loading...</p>
</div>
Событие пожара: показано.bs.modal
<div id="loadingModal" class="modal fade">
<div class="modal-dialog">
<p>Loading...</p>
</div>
</div>
Убедитесь, что вы загружаете jQuery перед использованием Bootstrap. Звучит просто, но у меня возникли проблемы с этими модальными событиями и получается, что ошибка была не с моим кодом, а тем, что я загружал Bootstrap перед jQuery.
Добавьте это:
$(document).ready(function(){
$(document).on('shown.bs.modal','.modal', function () {
// DO EVENTS
});
});
Иногда это не работает, если:
1) у вас есть ошибка в коде java-скрипта перед вашей строкой с $('#myModal').on('show.bs.modal'...). Чтобы устранить неполадки, поместите предупреждающее сообщение перед строкой, чтобы узнать, появляется ли оно при загрузке страницы. Чтобы устранить исключенные JS выше, чтобы узнать, какая из них является проблемой
2) Еще одна проблема заключается в том, что вы загружаете JS в неправильном порядке. Например, вы можете иметь часть $('#myModal').on('show.bs.modal'...) прежде чем загружать JQuery.js. В этом случае ваш вызов будет проигнорирован, поэтому сначала в HTML (убедитесь, что на странице просмотра страницы) убедитесь, что ссылка на сценарий JQuery выше вашего модального вызова onShow, иначе он будет проигнорирован. Чтобы устранить неполадки, поставьте предупреждение внутри него, чтобы показать его раньше. Если вы видите одно, а не одно внутри функции onShow, то ясно, что функция не может выполнить. Если правописание правильное, скорее всего, ваш вызов JQuery.js не будет выполнен или он будет сделан после части onShow
Ниже приведены подробные сведения:
show.bs.modal работает при загрузке диалогового окна модели Показано, что show.bs.modal сделал что-то после загрузки. post rendering
В моем случае проблема заключалась в том, как комментировать комментарий.. Порядок импорта между bootstrap.js и jquery. Потому что я использую шаблон Metronic и не проверяю его раньше
Убедитесь, что вы действительно используете модал начальной загрузки jquery, а не другую модальность jquery.
Потрачено слишком много времени на это...