在bootstrap模式上调用函数打开 [英] Calling a function on bootstrap modal open

问题描述

我曾经使用过JQuery UI的对话框，它有 open 选项，您可以在其中指定一些Javascript代码，以便在打开对话框后执行。我会使用该选项使用我的函数在对话框中选择文本。

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.

现在我想使用bootstrap的模态来做到这一点。以下是HTMl代码：

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">&times;</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监听器，但是之前显示了警告消息 模式出现了：

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!");
});

演示： Plunker

对于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...
})

请参阅此处的Bootstrap 3.0文档事件。

这篇关于在bootstrap模式上调用函数打开的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！