[英]Calling a function on bootstrap modal open - js additional code
[英]Calling a function on bootstrap modal open
我曾经使用过 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">×</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!");
});
您可以根据需要使用显示的事件/show 事件:
$( "#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 文档。
将不起作用.. 使用$(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
});
如果有人仍然有问题,唯一可以通过使用 (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 代码来显示和隐藏引导程序模型。
$('#my-model').on('shown.bs.modal', function (e) {
// do something here...
})
如果你想隐藏模型,那么你可以使用下面的代码。
$('#my-model').on('hidden.bs.modal', function() {
// do something here...
});
我希望这个答案对您的项目有用。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.