在 Bootstrap 模式打开时调用函数

我曾经使用 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">&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 侦听器，但显示了警报消息before模态出现：

$( ".code-dialog" ).click(function(){
    alert("I want this to appear after the modal has opened!");
});

您可以使用显示事件/根据您的需要显示事件：

$( "#code" ).on('shown', function(){
    alert("I want this to appear after the modal has opened!");
});

Demo: Plunker

Bootstrap 3 和 4 的更新

对于 Bootstrap 3.0 和 4.0，您仍然可以使用显示的事件，但您可以像这样使用它：

$('#code').on('shown.bs.modal', function (e) {
  // do something...
})

请参阅此处的 Bootstrap 3.0 文档在“活动”下。