AutoCAD 3DMAX C语言 Pro/E UG JAVA编程 PHP编程 Maya动画 Matlab应用 Android
Photoshop Word Excel flash VB编程 VC编程 Coreldraw SolidWorks A Designer Unity3D
 首页 > JavaScript

Bootstrap Modal对话框如何在关闭时触发事件

51自学网 http://www.wanshiok.com
Bootstrap,Modal对话框触发事件,Bootstrap,Modal关闭时触发事件,Bootstrap对话框触发事件

下表列出了模态框中要用到事件。这些事件可在函数中当钩子使用。

实例

下面的实例演示了事件的用法:

<!DOCTYPE html><html><head> <title>Bootstrap 实例 - 模态框(Modal)插件事件</title> <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> <script src="/scripts/jquery.min.js"></script> <script src="/bootstrap/js/bootstrap.min.js"></script></head><body> <h2>模态框(Modal)插件事件</h2> <!-- 按钮触发模态框 --><button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> 开始演示模态框</button> <!-- 模态框(Modal) --><div class="modal fade" id="myModal" tabindex="-1" role="dialog"  aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"  aria-hidden="true">× </button> <h4 class="modal-title" id="myModalLabel"> 模态框(Modal)标题 </h4> </div> <div class="modal-body"> 点击关闭按钮检查事件功能。 </div> <div class="modal-footer"> <button type="button" class="btn btn-default"  data-dismiss="modal"> 关闭 </button> <button type="button" class="btn btn-primary"> 提交更改 </button> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --></div><!-- /.modal --><script> $(function () { $('#myModal').modal('hide')})});</script><script> $(function () { $('#myModal').on('hide.bs.modal', function () { alert('嘿,我听说您喜欢模态框...');}) });</script> </body></html>

更多内容请点击专题《Bootstrap Modal使用教程》进行学习,希望大家喜欢。

如果大家还想深入学习,可以点击这里进行学习,再为大家附3个精彩的专题:

Bootstrap学习教程

Bootstrap实战教程

Bootstrap插件使用教程

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持wanshiok.com。


Bootstrap,Modal对话框触发事件,Bootstrap,Modal关闭时触发事件,Bootstrap对话框触发事件  
上一篇:微信公众平台开发教程(六)获取个性二维码的实例  下一篇:基于javascript实现按圆形排列DIV元素(一)