如何处理Twitter Bootstrap中的模式closures事件?

在Twitter引导,看模式的文档。 我无法弄清楚是否有方法来监听模式的closures事件并执行一个function。

例如,让我们以这个模式为例:

<div class="modal-header"> <button type="button" class="close close_link" data-dismiss="modal" aria-hidden="true">&times;</button> <h3>Modal header</h3> </div> <div class="modal-body"> ... </div> <div class="modal-footer"> <a href="#" class="btn close_link" data-dismiss="modal">Close</a> </div> 

顶部的Xbutton和底部的closuresbutton可以隐藏/closures模式,因为data-dismiss="modal" 。 所以我想知道,如果我能以某种方式听这个?

或者我可以这样做手动,我猜…

 $("#salesitems_modal").load(url, data, function() { $(this).modal('show'); $(this).find(".close_link").click(modal_closing); }); 

你怎么看?

3 Solutions collect form web for “如何处理Twitter Bootstrap中的模式closures事件?”

Bootstrap 3更新

Bootstrap 3文档引用了两个可以使用的事件

hide.bs.modal :当调用隐藏实例方法时,立即触发此事件。
hidden.bs.modal :当模式完成对用户的隐藏时,会触发此事件(等待CSS转换完成)​​。

并提供了一个如何使用它们的例子:

 $('#myModal').on('hidden.bs.modal', function () { // do something… }) 

Legacy Bootstrap 2.3.2回答

Bootstrap的文档引用了两个可以使用的事件

hide :隐藏实例方法被调用时立即触发此事件。
隐藏 :当模式完成对用户的隐藏时,会触发此事件(等待css转换完成)​​。

并提供了一个如何使用它们的例子:

 $('#myModal').on('hidden', function () { // do something… }) 

如果你的模态div是dynamic添加的然后使用(对于引导3)

 $(document).on('hide.bs.modal','#modal-id', function () { alert(''); //Do stuff here }); 

这也适用于非dynamic内容。

有两对模态事件,一个是“显示”和“显示”,另一个是“隐藏”和“隐藏”。 从名称上可以看出,当模态即将closures时,隐藏事件触发,例如点击右上angular的十字或closuresbutton等。 当模式实际上closures后,隐藏被激活。 你可以testing你自己的这些事件。 考试:

 $( '#modal' ) .on('hide', function() { console.log('hide'); }) .on('hidden', function(){ console.log('hidden'); }) .on('show', function() { console.log('show'); }) .on('shown', function(){ console.log('shown' ) }); 

而且,至于你的问题,我想你应该听听你的模态的“隐藏”事件。

  • 更改引导工具提示颜色
  • Bootstrap CSS主动导航
  • 如何使用Twitter引导程序响应更改导航栏崩溃阈值?
  • 如何使用Twitter Bootstrap的popup窗口来显示图片?
  • 如何使用Twitter Bootstrap构build2列(固定stream体)布局?
  • 如何使用twitter bootstrap 3隐藏元素并使用jQuery显示它?
  • 偏移列不起作用(Bootstrap v4.0.0-beta)
  • Bootstrap,Angular.js和Ember.js中使用的数据属性选项是否与Unobtrusive Javascript原则相冲突?
  • 垂直居中Bootstrap模态窗口
  • Bootstrap Modal立即消失
  • 仅将CSS样式应用于某些元素