jQuery 在引导模式打开时调用函数
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/17461682/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Calling a function on bootstrap modal open
提问by Mohamed Khamis
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.
我曾经使用过 JQuery UI 的对话框,它有一个open
选项,您可以在其中指定一些 Javascript 代码以在打开对话框后执行。我会使用该选项使用我拥有的功能在对话框中选择文本。
Now I want to do that using bootstrap's modal. Below is the HTMl code:
现在我想使用引导程序的模态来做到这一点。下面是 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'
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 beforethe modal appeared:
我尝试使用按钮的 onclick 侦听器,但是在模态出现之前显示了警报消息:
$( ".code-dialog" ).click(function(){
alert("I want this to appear after the modal has opened!");
});
回答by Arun P Johny
You can use the shown event/show event based on what you need:
您可以根据需要使用显示的事件/show 事件:
$( "#code" ).on('shown', function(){
alert("I want this to appear after the modal has opened!");
});
Demo: Plunker
演示:Plunker
Update for Bootstrap 3.0
Bootstrap 3.0 更新
For Bootstrap 3.0 you can still use the shown event but you would use it like this:
对于 Bootstrap 3.0,您仍然可以使用显示的事件,但您可以像这样使用它:
$('#code').on('shown.bs.modal', function (e) {
// do something...
})
See the Bootstrap 3.0 docs hereunder "Events".
请参阅此处“事件”下的 Bootstrap 3.0 文档。
回答by viper_tkd
will not work.. use $(window)
instead
将不起作用..$(window)
改用
For Showing
供展示
$(window).on('shown.bs.modal', function() {
$('#code').modal('show');
alert('shown');
});
For Hiding
用于隐藏
$(window).on('hidden.bs.modal', function() {
$('#code').modal('hide');
alert('hidden');
});
回答by Atchyut Nagabhairava
you can use show
instead of shown
for making the function to load just before modal open, instead of after modal open.
您可以使用show
代替shown
使函数在模态打开之前加载,而不是在模态打开之后加载。
$('#code').on('show.bs.modal', function (e) {
// do something...
})
回答by Josnidhin
Bootstrap modal exposes events. Listen for the the shown
event like this
Bootstrap 模式公开事件。shown
像这样监听事件
$('#my-modal').on('shown', function(){
// code here
});
回答by Erose
if somebody still has a problem the only thing working perfectly for me by useing (loaded.bs.modal) :
如果有人仍然有问题,唯一可以通过使用 (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
});
});
回答by Gaurang Sondagar
You can use belw code for show and hide bootstrap model.
您可以使用 belw 代码来显示和隐藏引导程序模型。
$('#my-model').on('shown.bs.modal', function (e) {
// do something here...
})
and if you want to hide model then you can use below code.
如果你想隐藏模型,那么你可以使用下面的代码。
$('#my-model').on('hidden.bs.modal', function() {
// do something here...
});
I hope this answer is useful for your project.
我希望这个答案对您的项目有用。