208

我曾经使用 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 侦听器，但在模式出现之前显示了警报消息：

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

5 回答 5

395

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

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

演示：Plunker

Bootstrap 3.0 更新

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

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

请参阅“事件”下的 Bootstrap 3.0 文档。

于 2013-07-04T04:06:25.787 回答
106

行不通..$(window)改用

用于展示

$(window).on('shown.bs.modal', function() { 
    $('#code').modal('show');
    alert('shown');
});

用于隐藏

$(window).on('hidden.bs.modal', function() { 
    $('#code').modal('hide');
    alert('hidden');
});
于 2014-04-28T15:18:24.573 回答
29

您可以使用show而不是shown使函数在模态打开之前加载，而不是在模态打开之后加载。

$('#code').on('show.bs.modal', function (e) {
  // do something...
})
于 2016-11-17T11:52:52.397 回答
10

引导模式公开事件。听这样的shown事件

$('#my-modal').on('shown', function(){
  // code here
});
于 2013-07-04T04:07:55.470 回答
0

如果有人仍然有问题，那么使用 (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
        });
});
于 2018-11-12T11:03:43.627 回答