在引导模式打开时调用函数 [英] Calling a function on bootstrap modal open
问题描述
我曾经使用过 JQuery UI 的对话框,它有 open
选项,您可以在其中指定一些 Javascript 代码以在打开对话框后执行.我会使用该选项使用我拥有的功能在对话框中选择文本.
现在我想使用引导程序的模态来做到这一点.以下是 HTML 代码:
<div class="modal-body"><预>打印你好世界"
至于打开模态的按钮:
显示代码
我尝试使用按钮的 onclick 侦听器,但是警报消息在 模式出现之前显示:
$( ".code-dialog" ).click(function(){alert("我希望在模态打开后出现这个!");});
您可以使用 显示事件/根据您的需要显示事件:
$( "#code" ).on('shown', function(){alert("我希望在模态打开后出现这个!");});
演示:Plunker
Bootstrap 3.0 更新
对于 Bootstrap 3.0,您仍然可以使用显示的事件,但您可以像这样使用它:
$('#code').on('shown.bs.modal', function (e) {//做点什么...})
I used to use JQuery UI's dialog, and it had the open
option, where you can specify some Javascript code to execute once the dialog is opened. I would have used that option to select the text within the dialog using a function I have.
Now I want to do that using bootstrap's modal. Below is the HTMl code:
<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'
And as for the button that opens the modal:
<a href="#code" data-toggle="modal" class="btn code-dialog">Display code</a>
I tried to use an onclick listener of the button, but the alert message was displayed before the modal appeared:
$( ".code-dialog" ).click(function(){
alert("I want this to appear after the modal has opened!");
});
You can use the shown event/show event based on what you need:
$( "#code" ).on('shown', function(){
alert("I want this to appear after the modal has opened!");
});
Demo: Plunker
Update for Bootstrap 3.0
For Bootstrap 3.0 you can still use the shown event but you would use it like this:
$('#code').on('shown.bs.modal', function (e) {
// do something...
})
See the Bootstrap 3.0 docs here under "Events".
这篇关于在引导模式打开时调用函数的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!