0%

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

发表于 更新于 分类于 ， ，

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>

原文链接: 8.2.2 使用data-＊属性弹出对话框