案例：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"
23
                        aria-hidden="true">×
24
                </button>
25
                <h4 class="modal-title" id="myModalLabel">
26
                    模态框（Modal）标题
27
                </h4>
28
            </div>
29
            <div class="modal-body">
30
                按下 ESC 按钮退出。
31
            </div>
32
            <div class="modal-footer">
33
                <button type="button" class="btn btn-default"
34
                        data-dismiss="modal">关闭
35
                </button>
36
                <button type="button" class="btn btn-primary">
37
                    提交更改
38
                </button>
39
            </div>
40
        </div><!-- /.modal-content -->
41
    </div><!-- /.modal-dialog -->
42
</div><!-- /.modal -->
43
<script>
44
$(function () { $('#myModal').modal({
45
    keyboard: true
46
})});
47
</script>
48
​