0%

8.8 警告框 8.8.1 使用data-属性关闭警告框

发表于 更新于 分类于 ， ，

8.8 警告框

前一章已经介绍了警告框的基本用法,本章不仅会介绍它的用法,并且会更系统地介绍警告框的各种激发机制。

8.8.1 使用data-*属性关闭警告框

前一章已经讲过:

  • 当关闭按钮位于警告框内部时,只要为该按钮指定了data-dismiss="alert"属性,当用户单击该按钮时,警告框就会随之关闭。
  • 当关闭按钮不在警告框之内时,除了要指定data-dismiss="alert"属性之外,还要指定data-target属性,data-target属性指定该按钮用于关闭哪个警告框。

程序示例

如下代码所示。

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
<!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">
		<!-- class属性为alert表示这是一个警告框 -->
		<div class="alert alert-danger" role="alert" id="myAlert">
			危险！请注意
		</div>
		<!-- 关闭按钮位于警告框之外时: -->
		<!-- data-dismiss="alert"表示该按钮可以关闭警告框 -->
		<!-- data-target="#myAlert"指定要关闭哪个警告框 -->
		<button type="button" class="btn btn-primary" data-dismiss="alert" data-target="#myAlert">
			关闭警告框
		</button>
	</div>
</body>

</html>

在该代码中定义的按钮不在警告框内,所以要:

  • 为按钮指定了data-dismiss="alert"属性,这意味着该按钮时用于关闭警告框。
  • 在按钮上指定data-target="#myAlert"属性,这意味着该按钮用于关闭id为myAlert的警告框。

原文链接: 8.8 警告框 8.8.1 使用data-属性关闭警告框