bootstrap 模态框
（1）modal 声明一个模态框
（2）modal-dialog 定义模态框尺寸
（3）modal-lg 定义大尺寸模态框
（4）modal-sm 定义小尺寸模态框
（5）modal-header
（6）modal-body
（7）modal-footer
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>模态框</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript">
$(function(){ $('#btn01').click(function(){ /*$('#modal04').modal('show');*/ $('#modal04').modal({ show:true, /*不能点击背景取消*/ backdrop:'static' }) }) /*点击取消按钮取消*/ $('#off').click(function(){ $('#modal04').modal('hide'); })})</script>
</head>
<body>
<div class="container"> <div class="row"> <!--data做js控制--> <button class="btn btn-primary" data-toggle="modal" data-target="#modal01">弹出大模态框</button> <button class="btn btn-primary" data-toggle="modal" data-target="#modal02">弹出中模态框</button> <button class="btn btn-primary" data-toggle="modal" data-target="#modal03">弹出小模态框</button> <button class="btn btn-primary" id="btn01">js控制的弹框模态框</button> </div></div><!--fade弹框渐进--><div class="modal fade" id="modal01"> <!--modal-dialog默认大小，modal-lg大弹框--> <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-primary">确定</button> <!--data-dismiss加类取消--> <button class="btn btn-default" data-dismiss="modal">取消</button> </div> </div> </div></div><div class="modal fade" id="modal02"> <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-primary">确定</button> <button class="btn btn-default" data-dismiss="modal">取消</button> </div> </div> </div></div><div class="modal fade" id="modal03"> <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-primary">确定</button> <button class="btn btn-default" data-dismiss="modal">取消</button> </div> </div> </div></div><div class="modal fade" id="modal04"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header">提示弹框</div> <div class="modal-body"> <p>js控制弹框</p> </div> <div class="modal-footer"> <button class="btn btn-primary">确定</button> <button class="btn btn-default" id='off'>取消</button> </div> </div> </div></div>
</body>
</html>
声明：本站所有文章资源内容，如无特殊说明或标注，均为采集网络资源。如若本站内容侵犯了原著者的合法权益，可联系本站删除。
