8.7 弹出框 8.7.1 使用data-属性和JS触发弹出框

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

8.7 弹出框

弹出框与工具提示非常相似,只是弹出框更大,并且支持标题和内容,而且支持的内容更多。与工具提示不同的是,弹出框需要用户单击链接或按钮才会显示出来,用户再次单击链接或按钮会隐藏弹出框。
弹出框插件依赖popover.js和tooltip.js库。这两个JS库包含在bootstrap.js或bootstrap.min.js中。

8.7.1 使用data-*属性和JS触发弹出框

弹出框也需要同时使用data-*属性和JS才能触发。
给按钮或链接添加弹出框,请按如下步骤进行:

  1. 为按钮或链接设置data-toggle="popover"属性,这个属性是固定的。
  2. 为按钮或链接设置title或data-title属性,这两个属性的属性值都可作为**弹出框的标题**。Bootstrap优先读取title属性值作为弹出框的标题,只有当title属性不存在或该属性值为空时才会读取data-title属性值作为弹出框的标题;
  3. 为按钮或链接设置data-content属性,该属性的值将作为弹出框的内容。
  4. 为按钮或链接设置data-placement属性,该属性控制弹出框的出现位置。该属性支持4 个值:"top"、"right"、"bottom"、"left",分别指定弹出框出现在按钮或链接的顶部、右边、底部或左边。如果不指定该属性,弹出框默认出现在按钮或链接的顶部。
  5. 通过JS调用弹出框的popover()方法激活弹出框。例如可通过如下代码调用:
    1
    $('[data-toggle="popover"]').popover();
    该JS代码负责获取所有指定了data-toggle="popover"属性的元素,再调用它们的popover()方法来激活弹出框。

下面代码示范了Bootstrap弹出框的用法。

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
<!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">
    <script type="text/javascript" src="../jquery-3.1.1.js"></script>
    <script type="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script>
</head>

<body>
    <div class="container">
        <h4>超链接的弹出框</h4>
        <!-- data-toggle表示该按钮可以切换弹出框 -->
        <!-- title属性指定弹出框的 标题  -->
        <!-- data-content属性指定弹出框的 内容 -->
        <a href="#" data-toggle="popover" title="默认的弹出框" data-content="弹出框的内容<br>第二行内容">
            默认的弹出框</a><br>
        <!-- data-placement指定弹出框的 位置 -->
        <a href="#" data-toggle="popover" data-placement="left" title="左侧的弹出框" data-content="弹出框的内容<br>第二行内容">
            左侧的弹出框</a><br>
        <a href="#" data-toggle="popover" data-placement="right" title="右侧的弹出框" data-content="弹出框的内容<br>第二行内容">
            右侧的弹出框</a><br>
        <!-- 当title属性不存在或者为空时以data-title属性值作为 弹出框的标题 -->
        <a href="#" data-toggle="popover" data-title="顶部的弹出框" data-placement="top" title=""
            data-content="弹出框的内容<br>第二行内容">
            顶部的弹出框</a><br>
        <a href="#" data-toggle="popover" data-placement="bottom" data-title="底部的弹出框" data-content="弹出框的内容<br>第二行内容">
            底部的弹出框</a><br>
        <h4>按钮的弹出框</h4>
        <button class="btn btn-info" data-toggle="popover" title="默认的弹出框" data-content="弹出框的内容<br>第二行内容">
            默认的弹出框</button>
        <button class="btn btn-info" data-toggle="popover" data-placement="left" title="左侧的弹出框"
            data-content="弹出框的内容<br>第二行内容">
            左侧的弹出框</button>
        <button class="btn btn-info" data-toggle="popover" data-placement="right" title="右侧的弹出框"
            data-content="弹出框的内容<br>第二行内容">
            右侧的弹出框</button>
        <button class="btn btn-info" data-toggle="popover" data-placement="top" title="顶部的弹出框"
            data-content="弹出框的内容<br>第二行内容">
            顶部的弹出框</button>
        <button class="btn btn-info" data-toggle="popover" data-placement="bottom" title="底部的弹出框"
            data-content="弹出框的内容<br>第二行内容">
            底部的弹出框</button>
    </div>
    <script type="text/javascript">
        $(function () {
            // 开启弹出框
            $("[data-toggle='popover']").popover({
                html: true
            });
        });
    </script>
</body>

</html>

从上面代码可以看出,对链接添加弹出框和对按钮添加弹出框的方法并没有太大的区别,都需要按上面介绍的步骤添加data-toggle="popover"、data-placement 属性和title、data-content属性。如果不指定data-placement属性,弹出框默认出现在链接或按钮的右边。

最后一段JS代码负责调用弹出框的popover()方法激发弹出框。需要说明的是,由于弹出框的内容中包含HTML 的换行符(<br>元素),因此上面代码在调用popover()方法时传入的JS对象中指定html:true,这表明让弹出框内容支持HTML。