0%

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

发表于 更新于 分类于 ， ，

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。

原文链接: 8.7 弹出框 8.7.1 使用data-属性和JS触发弹出框