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">
资源评论
weixin_38580959
- 粉丝: 3
- 资源: 961
最新资源
- java.HttpClient与网络请求(解决方案).md
- 技术资料分享STM32固件库使用手册的中文翻译版很好的技术资料.zip
- 非常好的oracle性能优化技术内幕详解100%好用.7z
- 已停产 适用于 Android 平台的 Rrich 文本编辑器 Android富文本编辑器，暂停维护.zip
- 非常好的MySQL技术内幕详解100%好用.7z
- 技术资料分享STM32的USB详解很好的技术资料.zip
- 基于java+ssm+mysql的学生学籍管理系统任务书.doc
- vue+node+mysql实现的影视追剧管理后台系统，用于毕业设计.zip
- ProjectADC_S.zip
- 技术资料分享STM32的IAP方案很好的技术资料.zip
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
