在引导模态打开时调用一个函数

我曾经使用JQuery UI的对话框，它有open选项，您可以指定一些Javascript代码来执行一旦打开对话框。 我会用这个选项来使用我有的函数来select对话框中的文本。

现在我想用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' 

至于打开模式的button：

  <a href="#code" data-toggle="modal" class="btn code-dialog">Display code</a> 

我尝试使用button的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

引导3.0的更新

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

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

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

Answer 2

将不会工作..使用$(window)而不是

/ /显示

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

//为了隐藏

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

Answer 3

Bootstrap模式暴露事件​​。 听这样的事件

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

Answer 4

你可以使用show而不是shown使function加载之前，模式打开，而不是模式打开后。

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

Answer 5

您可以使用belw代码来显示和隐藏bootstrap模型。

 $('#my-model').on('shown.bs.modal', function (e) { // do something here... }) 

如果你想隐藏模型，那么你可以使用下面的代码。

 $('#my-model').on('hidden.bs.modal', function() { // do something here... }); 

我希望这个答案对你的项目有用。