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 >
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" >js控制的弹出</button>
40 </div>
41 </div>
42 <!-- .modal>.modal-dialog>.modal-content>.modal-header+.modal-body+.modal-footer -->
43 <div class="modal fade" >
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" >确定</button>
57 <button class="btn btn-default" data-dismiss="modal">取消</button>
58 </div>
59
60 </div>
61 </div>
62 </div>
63 </body>
64 </html>