引导程序模态打开时调用函数


178

我曾经使用过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!");
});

3
shown.bs.modalHTML文档至少包含<div class="modal fade"><div class="modal-dialog"></div></div>结构时发生事件。
Chemical Programmer


问候@Chemical Programmer,它应该与答案一起出现
Tarek

Answers:


329

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

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

演示:柱塞

Bootstrap 3.0的更新

对于Bootstrap 3.0,您仍然可以使用显示的事件,但是您可以这样使用它:

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

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


17
使用$("#code").on("shown.bs.modal", function(e) {})自举3.0。
teewuane 2014年

确保至少考虑到化学程序员所说的关于需要<div class =“ modal fade”> <div class =“ modal-dialog”> </ div> </ div>结构的说法,以便至少调用此代码
whyoz 2015年

1
#code:指的jQuery选择,jQuery的基本成分之一w3schools.com/jquery/jquery_selectors.asp
DDW

$(document).on("shown.bs.modal", ...用于整体聆听
vladkras '17

1
至少在显示模式之前实际执行了show.bs.modal。就我而言,这不是问题,但可能很高兴知道。
强尼
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.