<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>模态框</title>
<!--
modal框下会话窗口结构.
modal-dialog-content-(header+body+footer)
modal弹窗下的--会话类别. 内容三部分.
footer取消键通常绑定事件 , data-dismiss="modal"
可以通过modal-lg-md-sm来设置modal窗口大小,用于设置dialog弹窗大小.
(没有xs最小号)
-->
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<button class="btn btn-info btn-lg" data-toggle="modal" data-target="#modal01">Pop</button>
<button class="btn btn-info btn-lg" data-toggle="modal" data-target="#modal02">Pop2</button>
<button class="btn btn-info btn-lg" data-toggle="modal" data-target="#modal03">Pop3</button>
<button class="btn btn-info btn-lg" data-toggle="modal" data-target="#modal04">Pop4</button>
</div>
</div>
<div class="modal fade" id="modal01">
<!-- 直接增加fade式样, 完成淡入淡出. -->
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
提示弹窗
</div>
<div class="modal-body">
<p>弹窗内容</p>
</div>
<div class="modal-footer">
<button class="btn btn-info">确定</button>
<button class="btn btn-default" data-dismiss="modal">取消</button>
<!-- data-dismiss(数据取消)= '类型' -->
</div>
</div>
</div>
</div>
<div class="modal fade" id="modal02">
<!-- 直接增加fade式样, 完成淡入淡出. -->
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
提示弹窗
</div>
<div class="modal-body">
<p>弹窗内容</p>
</div>
<div class="modal-footer">
<button class="btn btn-info">确定</button>
<button class="btn btn-default" data-dismiss="modal">取消</button>
<!-- data-dismiss(数据取消)= '类型' -->
</div>
</div>
</div>
</div>
<div class="modal fade" id="modal03">
<!-- 直接增加fade式样, 完成淡入淡出. -->
<div class="modal-dialog modal-sm ">
<div class="modal-content">
<div class="modal-header">
提示弹窗
</div>
<div class="modal-body">
<p>弹窗内容</p>
</div>
<div class="modal-footer">
<button class="btn btn-info">确定</button>
<button class="btn btn-default" data-dismiss="modal">取消</button>
<!-- data-dismiss(数据取消)= '类型' -->
</div>
</div>
</div>
</div>
<div class="modal madol-xs fade" id="modal04">
<!-- 直接增加fade式样, 完成淡入淡出. -->
<div class="modal-dialog modal-sm ">
<div class="modal-content">
<div class="modal-header">
提示弹窗
</div>
<div class="modal-body">
<p>弹窗内容</p>
</div>
<div class="modal-footer">
<button class="btn btn-info">确定</button>
<button class="btn btn-default" data-dismiss="modal">取消</button>
<!-- data-dismiss(数据取消)= '类型' -->
</div>
</div>
</div>
</div>
</body>
</html>
