Я использовал диалог 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">×</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!");
});
Вы можете использовать показанное событие/показать событие на основе того, что вам нужно:
$( "#code" ).on('shown', function(){
alert("I want this to appear after the modal has opened!");
});
Демо: Plunker
Для Bootstrap 3.0 вы все равно можете использовать показанное событие, но вы бы использовали его следующим образом:
$('#code').on('shown.bs.modal', function (e) {
// do something...
})
См. здесь документы Bootstrap 3.0 в разделе "События".
$("#code").on("shown.bs.modal", function(e) {})
для начальной загрузки 3.0.
не будет работать. Используйте $(window)
вместо
//ДЛЯ ПОКАЗА
$(window).on('shown.bs.modal', function() {
$('#code').modal('show');
alert('shown');
});
//ДЛЯ СКРЫТИЯ
$(window).on('hidden.bs.modal', function() {
$('#code').modal('hide');
alert('hidden');
});
вы можете использовать show
вместо shown
для того, чтобы функция загружалась непосредственно перед открытием модально, а не после модального открытия.
$('#code').on('show.bs.modal', function (e) {
// do something...
})
Модификация Bootstrap вызывает события. Слушайте событие shown
, подобное этому
$('#my-modal').on('shown', function(){
// code here
});
Нашел другой ответ на github: $(document).on('show.bs.modal, function(){})
если у кого-то все еще есть проблема, единственная вещь, которая отлично работает для меня, использует (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
});
});
Вы можете использовать код belw для show и скрывать модель начальной загрузки.
$('#my-model').on('shown.bs.modal', function (e) {
// do something here...
})
и если вы хотите скрыть модель, вы можете использовать код ниже.
$('#my-model').on('hidden.bs.modal', function() {
// do something here...
});
Я надеюсь, что этот ответ будет полезен для вашего проекта.
shown.bs.modal
происходит, когда HTML-документ содержит как минимум<div class="modal fade"><div class="modal-dialog"></div></div>