BootStrap中的模态框（modal，弹出层）功能示例代码
36 浏览量
2020-10-17
18:59:04
上传
评论
收藏 60KB PDF 举报
BootStrap中的模态框（中的模态框（modal，弹出层）功能示例代码，弹出层）功能示例代码
bootstrap中的模态框（modal），不同于Tooltips，模态框以弹出对话框的形式出现，具有最小和最实用的功能
集。这篇文章主要介绍了BootStrap中的模态框（modal，弹出层）,需要的朋友可以参考下
bootstrap中的模态框（modal），不同于Tooltips，模态框以弹出对话框的形式出现，具有最小和最实用的功能集。务必将模
态框的 HTML 代码放在文档的最高层级内（也就是说，尽量作为 body 标签的直接子元素），以避免其他组件影响模态框的展
现或功能。
默认的modal示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Modal</title>
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save</button>
</div>
</div>
</div>
</div>
<script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>
为 .modal 添加 role="dialog"，用于指定模态框为对话框。为 .modal-dialog 添加 aria-hidden="true" 属性。通过 aria-describedby 属性
为模态框 .modal 添加描述性信息。关闭动画如果你不需要模态框弹出时的动画效果（淡入淡出效果），删掉 .fade 类即可。
通过按钮属性显示不同内容当有一堆按钮，都要触发相同的模态框(如：向好友列表中某个人发消息)，只是有用户ID不同，那
么可以使用data-whatever配合event.relatedtarget来实现：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Modal</title>
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
<div class="panel panel-default">
<div class="panel-heading">好友列表</div>
<div class="panel-body">
<div class="list-group" role="group" aria-label="好友列表">
<button type="button" class="list-group-item" data-toggle="modal" data-target="#exampleModal"
data-whatever="张三">张三
</button>
<button type="button" class="list-group-item" data-toggle="modal" data-target="#exampleModal"
data-whatever="李四">李四
</button>
<button type="button" class="list-group-item" data-toggle="modal" data-target="#exampleModal"
data-whatever="王二">王二
资源评论
