1 <!-- bootstrap 模态框 2 1、modal 申明一个模态框 3 2、modal-dialog 定义模态框的尺寸 4 3、modal-lg 定义大尺寸的模态框 5 4、modal-sm 定义小尺寸的模态框 6 5、modal-header 7 6、modal-body 8 7、modal-footer --> 9 <!DOCTYPE html> 10 <html lang="en"> 11 <head> 12 <meta charset="UTF-8"> 13 <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> 14 <title>Document</title> 15 <script type="text/javascript" src="../jquery-1.12.4.min.js"></script> 16 <script type="text/javascript" src="./js/bootstrap.min.js"></script> 17 <link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css"> 18 <script type="text/javascript"> 19 $(function(){ 20 // 点击背景不隐藏弹窗 21 $('#modal01').modal({ 22 show:true, 23 backdrop:'static' 24 }); 25 26 $('#btn01').click(function(){ 27 $('#modal01').modal('show'); 28 }); 29 $('#btn02').click(function(){ 30 $('#modal01').modal('hide'); 31 }); 32 }); 33 </script> 34 </head> 35 <body> 36 <div class="container"> 37 <div class="row"> 38 <button class="btn btn-primary" data-toggle="modal" data-target="#modal01">弹出模态框</button> 39 <button class="btn btn-primary" id="btn01">js控制的弹出</button> 40 </div> 41 </div> 42 <!-- .modal>.modal-dialog>.modal-content>.modal-header+.modal-body+.modal-footer --> 43 <div class="modal fade" id="modal01"> 44 <div class="modal-dialog modal-lg"> 45 <div class="modal-content"> 46 47 <div class="modal-header"> 48 提示弹框 49 </div> 50 51 <div class="modal-body"> 52 <p>文字内容</p> 53 </div> 54 55 <div class="modal-footer"> 56 <button class="btn btn-primary" id="btn02">确定</button> 57 <button class="btn btn-default" data-dismiss="modal">取消</button> 58 </div> 59 60 </div> 61 </div> 62 </div> 63 </body> 64 </html>