8.2 对话框 8.2.1 静态对话框

发表于 更新于 分类于 ， ， Waline： 本文字数： 5.5k 阅读时长 ≈ 5 分钟

8.2 对话框

在Web页面上经常以对话框的方式完成某种操作,比如用户注册、登录或阅读一段提示信息,Bootstrap的JS插件则为对话框提供了支持。
Bootstrap的对话框插件依赖transition.js和modal.js库。这两个JS库都包含在bootstrap.js或bootstrap.min.js中。

8.2.1 静态对话框

从理论上来说,Bootstrap 可以将大部分HTML 元素(如<div>元素)当成对话框处理,Bootstrap可以在页面上弹出或隐藏这些元素。
但从实际界面效果来看,开发者当然希望给用户呈现一个优雅、美观的用户界面,因此Bootstrap也为对话框提供了如下支持。

对话框组成

Bootstrap的对话框分为如下几个部分。

  1. 第一层容器:这层容器需要被指定class="modal"样式,它是整个对话框的容器。
  2. 第二层容器:这层容器需要被指定class="modal-dialog"样式,该样式设置一个居中的对话框。
  3. 第三层容器:这层容器需要被指定class="modal-content"样式,该样式用于设置对话框的主体,这层容器的样式用于控制对话框的边框、背景、阴影等效果。

对话框主体构成

如果要为对话框添加内容,则需要在class="modal-content"容器内添加。该容器内可包含如下三个子部分。

  1. 对话框头:这部分需要被指定class="modal-header"样式,这部分包括对话框的标题、关闭按钮等。
  2. 对话框主体:这部分需要被指定class="modal-body"样式,这部分包括对话框的主要内容,可以任意设置这些内容,比如使用网格布局添加内容。
  3. 对话框尾注:这部分需要被指定class="modal-footer"样式,这部分包括对话框的各种操作按钮。

程序示例 创建静态对话框

下面代码示范了一个静态对话框的构建方法。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title> 静态对话框 </title>
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../bootstrap/css/bootstrap-theme.min.css">
</head>

<body>
    <!-- 第一层容器,对话框的整体容器 -->
    <div class="modal show" tabindex="-1" role="dialog">
        <!-- 第2层容器,对话框-->
        <div class="modal-dialog" role="document">
            <!-- 第3层容器,对话框主体 -->
            <div class="modal-content">
                <!-- 对话框头 -->
                <div class="modal-header">
                    <button class="close" type="button">
                        <span aria-hiden="true">&times;</span>
                    </button>
                    <h4>对话框</h4>
                </div>
                <!-- 对话框主体 -->
                <div class="modal-body">
                    <p>对话框内容</p>
                </div>
                <!-- 对话框尾注 -->
                <div class="modal-footer">
                    <button class="btn btn-default" type="button">关闭</button>
                    <button class="btn btn-primary" type="button">保存</button>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="../jquery-3.1.1.js"></script>
    <script type="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script>
</body>

</html>

上面代码分别定义了3个<div>容器,这三个<div>容器就是构建Bootstrap对话框的三层容器。接下来代码在第三层容器中添加对话框头、对话框主体和对话框尾注三个部分。
在上面的对话框代码中,第一层容器除了被指定了.modal样式之外,还被指定了一个.show样式,该样式用于控制在加载页面时自动显示该对话框;与此对应的还有一个.fade 样式,该样式用于隐藏对话框。
提示:该对话框目前只是一个静态的对话框,用户无法通过底部的关闭按钮和右上角的关闭按钮来关闭对话框,本节后面会介绍如何关闭对话框。

Bootstrap对话框特征

Bootstrap的对话框优雅、美观。同时该对话框还具有如下特征:

  1. 对话框会自动浮动在浏览器中央,而且宽度会自适应浏览器的大小。
  2. 当浏览器viewport宽度小于768px时,对话框宽度为600px。
  3. 在对话框的底部会自动添加一个灰色的蒙层,用于防止用户单击对话框底部分的元素。
  4. 对话框的显示、隐藏过程具有过渡效果。

另外需要说明的是,Bootstrap不支持同时打开多个对话框,如果需要同时打开多个对话框,则需要自己修改代码。

控制对话框大小的样式

Bootstrap为控制对话框大小提供了如下两个样式。

样式 描述
.modal-sm 设置小的对话框。
.modal-lg 设置大的对话框。
对于大的对话框,则可以向对话框中添加更多的内容。在向对话框添加更多内容时,应该考虑将内容添加在对话框主体(也就是被指定了class="modal-body"属性的元素)内。

程序示例 在对话框主体内使用网格布局

例如如下代码示范了如何在对话框主体内使用网格布局。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title> 静态对话框 </title>
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../bootstrap/css/bootstrap-theme.min.css">
    <style type="text/css">
        .row {
            margin-bottom: 20px;
        }

        [class*="col-"] {
            padding-top: 15px;
            padding-bottom: 15px;
            background-color: #eee;
            background-color: rgba(86, 61, 124, .15);
            border: 1px solid #ddd;
            border: 1px solid rgba(86, 61, 124, .2);
        }
    </style>
</head>

<body>
    <!-- 第1层容器,大的对话框,立即显示 -->
    <div class="modal modal-lg show" tabindex="-1" role="dialog">
        <!-- 第2层容器,对话框 -->
        <div class="modal-dialog" role="document">
            <!-- 第3层容器,对话框主体 -->
            <div class="modal-content">
                <!-- 对话框头 -->
                <div class="modal-header">
                    <button class="close" type="button">
                        <span aria-hiden="true">&times;</span>
                    </button>
                    <h4>对话框</h4>
                </div>
                <!-- 对话框主体 -->
                <div class="modal-body">
                    <!-- 网格布局 -->
                    <div class="row">
                        <div class="col-sm-6">
                            .col-sm-6
                        </div>
                        <div class="col-sm-6">
                            .col-sm-6
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-4">
                            .col-sm-4
                        </div>
                        <div class="col-sm-8">
                            .col-sm-8
                        </div>
                    </div>
                </div>
                <!-- 对话框脚注 -->
                <div class="modal-footer">
                    <button class="btn btn-default" type="button">关闭</button>
                    <button class="btn btn-primary" type="button">保存</button>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="../jquery-3.1.1.js"></script>
    <script type="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script>
</body>

</html>