8.2.2 使用data-＊属性弹出对话框

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

8.2.2 使用data-*属性弹出对话框

正如前面介绍的,Bootstrap也支持两种方式弹出对话框。

  1. 通过data-*属性。
  2. 通过JS脚本调用方法来弹出对话框。

先看Bootstrap推荐的方式。使用data-*属性弹出对话框,这种方式无须使用JS脚本,因此使用起来简单、方便。使用这种方式需要为弹出对话框的按钮或链接指定如下两个属性。

  1. data-toggle:将该属性的属性值指定为modal。
  2. data-target:该属性用于指定对话框容器(被指定了class="modal"属性的元素),该属性的属性值可以是各种CSS选择器,通常会使用ID选择器。

使用data-*属性来弹出对话框

如果要在对话框内定义关闭按钮或链接,只要为关闭按钮或链接指定data-dismiss="modal"样式即可。下面代码示范了如何使用data-*属性来弹出对话框。

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
<!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>
    <!-- 打开对话框的按钮 -->
    <!-- 1号代码 -->
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
        打开对话框
    </button>
    <!-- 对话框容器 -->
    <div class="modal" tabindex="-1" role="dialog" id="myModal">
        <!-- 对话框 -->
        <div class="modal-dialog" role="document">
            <!-- 对话框内容 -->
            <div class="modal-content">
                <!-- 对话框头 -->
                <div class="modal-header">
                    <!-- 对话框关闭按钮,data-dismiss="modal"表示该按钮可以关闭对话框-->
                    <button class="close" type="button" data-dismiss="modal">
                        <!-- 关闭图标 -->
                        <span aria-hiden="true">&times;</span>
                    </button>
                    <h4>对话框</h4>
                </div>
                <!-- 对话框主体 -->
                <div class="modal-body">
                    <p>对话框内容</p>
                </div>
                <!-- 对话框脚注 -->
                <div class="modal-footer">
                    <!-- 关闭按钮 data-dismiss="modal"表示该按钮可以关闭对话框 -->
                    <button class="btn btn-default" type="button" data-dismiss="modal">
                        关闭</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>

1号代码定义了一个按钮,且该按钮还被指定了data-toggle="modal" 和data-target="#myModal"样式,其中#myModal是一个ID选择器,用于表示界面上的对话框,因此用户单击该按钮即可弹出对应对话框。
此外,还为对话框中内两个关闭按钮指定了data-dismiss="modal“属性,因此用户可通过这两个按钮来关闭对话框。

对话框其他属性

除了前面介绍的data-toggle、data-target两个属性之外,Bootstrap对于弹出对话框的按钮还提供了如下属性支持:

  • data-backdrop:属性值为boolean值或'static'字符串,用于指定是否包含一个背景<div>元素,如果该属性值被设为true,则用户单击背景时对话框消失;如果该属性值被设为false或'static',则用户单击背景时对话框不会消失。
  • data-keyboard:属性值为boolean值。指定是否可通过键盘上的Esc键来关闭对话框。
  • data-show:属性值为boolean值。指定是否在页面加载时自动显示对话框。

设置对话框时具有过渡的动画效果

如果希望弹出对话框时具有过渡的动画效果,则可为对话框的第一层容器指定.fade样式,也就是将对话框的第一层<div>元素改为如下形式:

1
2
3
<div class="modal fade" tabindex="-1" role="dialog" id="myModal">
...
</div>