<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="../bootstrap-v3/css/bootstrap.css">
<!-- <link rel="stylesheet" href="../css/index.css"> -->
</head>
<body>
<div class="container">
<h1 class="page-header">创建模态框</h1>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
<!--
1、data-target="#myModal" 要在页面上加载显示的模态框的目标
2、data-toggle="modal" HTML5 自定义的 data 属性 data-toggle 用于切换模态框（Modal）插件的隐藏内容
-->
点击显示模态框
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<!--
.modal: 将div的内容识别为模态框
.fade: 模态框被切换时，内容以淡入淡出的方式显示或者隐藏。
.aria-labelledby="myModalLabel"，引用模态框的标题。
.aria-hidden="true", 用于保持模态窗口不可见，直到触发器被触发为止（比如点击在相关的按钮上）
-->
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<!--
.modal-header: 模态窗口的头部定义样式的类
.close: css的类，为模态窗口的关闭按钮设置样式
.data-dismiss="modal": 自定义的 HTML5 data 属性, 此处用于关闭模态窗口
-->
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">模态框标题</h4>
</div>
<div class="modal-body">
<!--
.modal-body： Bootstrap CSS 的一个 CSS类，用于为模态窗口的主体设置样式
-->
...
</div>
<div class="modal-footer">
<!--
.modal-footer： Bootstrap CSS 的一个 CSS类，用于为模态窗口的底部设置样式
-->
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" >Save changes</button>
</div>
</div>
</div>
</div>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">添加</button>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
<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="exampleModalLabel">添加团队</h4>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="recipient-name" class="control-label">团队名称</label>
<input type="text" class="form-control" id="recipient-name">
</div>
<div class="form-group">
<label for="recipient-name" class="control-label">email</label>
<input type="text" class="form-control" id="recipient-email">
</div>
<div class="form-group">
<label for="message-text" class="control-label">团队描述</label>
<textarea class="form-control" id="message-text"></textarea>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
<button type="button" class="btn btn-primary">添加</button>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="../jquery-3.2.1.js"></script>
<script type="text/javascript" src="../bootstrap-v3/js/bootstrap.js"></script>
<script type="text/javascript">
$('#myModal').on('show.bs.modal', function () {
// how.bs.modal事件，在调用 show 方法后触发。
// 执行一些动作...
alert('你将要看到模态框')
})
$('#myModal').on('shown.bs.modal', function () {
// 当模态框对用户可见时触发（将等待 CSS 过渡效果完成）。
// 执行一些动作...
alert('你看见了模态框')
})
$('#myModal').on('hide.bs.modal', function () {
// 当调用 hide 实例方法时触发。
// 执行一些动作...
alert('你 要 关闭 模态框')
})
$('#myModal').on('hidden.bs.modal', function () {
// 当模态框完全对用户隐藏时触发。
// 执行一些动作...
alert('你 关闭 了 模态框')
})
</script>
</body>
</html>
上述运行结果：
730
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
