在bootstrap模式上调用函数打开

Question

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

现在我想用bootstrap的模态做到这一点.以下是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!");
});

Answer 1

您可以根据需要使用显示的事件 /节目事件:

$( "#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文档.

Answer 2

不会工作.. $(window)改用

// FOR SHOWING

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

//为了隐藏

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

Answer 3

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

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

Answer 4

Bootstrap模式公开事件.听听这样的shown事件

$('#my-modal').on('shown', function(){
  // code here
});