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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-26 19:08:08  来源:igfitidea点击:

Calling a function on bootstrap modal open

javascriptjqueryjquery-uitwitter-bootstrapmodal-dialog

提问by Mohamed Khamis

I used to use JQuery UI's dialog, and it had the openoption, 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">&times;</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 showinstead of shownfor 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 shownevent 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.

我希望这个答案对您的项目有用。