0%

8.7.2 焦点触发的弹出框

发表于 更新于 分类于 ， ，

8.7.2 焦点触发的弹出框

默认情况下,Bootstrap的弹出框需要通过鼠标单击来触发显示、隐藏。与工具提示类似的是,Bootstrap也允许改变弹出框的触发方式:通过trigger选项改变弹出框的触发方式,添加trigger通过在HTML元素中需使用data-trigger属性。
为了有更好的跨浏览器和跨平台效果,建议使用<a>元素,而不能使用<button>元素,并且还需要指定role="button"属性和tabindex属性。

程序示例

如下代码示范了焦点触发的弹出框。

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
<!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">
		<!-- data-toggle="popover"属性表示该链接可以触发弹出框 -->
		<!-- title属性表示弹出框的内容 -->
		<!-- data-trigger设置在得到焦点时触发弹出框的 -->
		<!-- tabindex="0"表示当第一次按下tab键时该链接将获得焦点 -->
		<a class="btn btn-info" role="button" data-toggle="popover" title="焦点触发的弹出框" tabindex="0" data-trigger="focus"
			data-content="弹出框的内容<br>第二行内容">
			焦点触发的弹出框</a>
	</div>
	<script type="text/javascript">
		$(function () {

			$("[data-toggle='popover']").popover({
				// 运行弹出框内容中带有html代码
				html: true
			});
		});
	</script>
</body>

</html>

上面的代码使用<a>标签定义了一个按钮,由于该链接只是作为按钮使用,因此为该按钮指定了role="button"属性。<a>标签指定了data-trigger="focus",这意味着该弹出框将会通过焦点来触发:得到焦点时打开弹出框,失去焦点时关闭弹出框。
将tabindex设为0是为了保证该按钮最先得到焦点,可就是当用户第一次按下Tab键时,该按钮将会得到焦点。
浏览该页面,按下键盘上的Tab键,将会打开该按钮的弹出框;再次按下Tab键(或用鼠标单击页面上其他任意地方),该按钮失去焦点,弹出框将会被自动关闭。

原文链接: 8.7.2 焦点触发的弹出框