案例：Bootstrap案例     状态：可编辑再运行    进入竖版
 运行结果　
​x
 
1
<!DOCTYPE html>
2
<html>
3
<head>
4
    <meta charset="utf-8">
5
    <title>Bootstrap 实例 - 模态框（Modal）插件事件</title>
6
    <link rel="stylesheet" href="/css/bootstrap/bootstrap3.3.7.min.css">
7
    <script src="/js/bootstrap/jquery.min.js"></script>
8
    <script src="/js/bootstrap/bootstrap3.3.7.min.js"></script>
9
</head>
10
<body>
11
​
12
<h2>模态框（Modal）插件事件</h2>
13
<!-- 按钮触发模态框 -->
14
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
15
    开始演示模态框
16
</button>
17
<!-- 模态框（Modal） -->
18
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
19
    <div class="modal-dialog">
20
        <div class="modal-content">
21
            <div class="modal-header">
22
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×
23
                </button>
24
                <h4 class="modal-title" id="myModalLabel">
25
                    模态框（Modal）标题
26
                </h4>
27
            </div>
28
            <div class="modal-body">
29
                点击关闭按钮检查事件功能。
30
            </div>
31
            <div class="modal-footer">
32
                <button type="button" class="btn btn-default" data-dismiss="modal">
33
                    关闭
34
                </button>
35
                <button type="button" class="btn btn-primary">
36
                    提交更改
37
                </button>
38
            </div>
39
        </div><!-- /.modal-content -->
40
    </div><!-- /.modal-dialog -->
41
</div><!-- /.modal -->
42
<script>
43
   $(function () { $('#myModal').modal('hide')})});
44
</script>
45
<script>
46
   $(function () { $('#myModal').on('hide.bs.modal', function () {
47
      alert('嘿，我听说您喜欢模态框...');})
48
   });