我曾经使用jQuery UI的对话框,它有开放选项,在那里你可以指定一些Javascript代码,一旦对话框打开执行。我会使用该选项来选择对话框中的文本,使用我拥有的函数。
现在我想用bootstrap的模态。下面是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!");
});
如果有人仍然有一个问题,唯一的工作完美为我使用(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
});
});
你可以根据需要使用显示事件/显示事件:
$( "#code" ).on('shown', function(){
alert("I want this to appear after the modal has opened!");
});
演示:一美元
更新引导3和4
对于Bootstrap 3.0和4.0,你仍然可以使用显示的事件,但你会这样使用它:
$('#code').on('shown.bs.modal', function (e) {
// do something...
})
请在“事件”下面查看Bootstrap 3.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
});
});