bootstarp模态框 

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <meta name="viewport" content="width=device-width,user-scalable=no,
  6     initial-scale=1.0,maximum-scale=1.0,minmum-scale=1.0">
  7     <title>Title</title>
  8     <link rel="stylesheet" type="text/css" href="slide/css/bootstrap.min.css">
  9     <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
 10     <script type="text/javascript" src="js/bootstrap.min.js"></script>
 11     <script type="text/javascript">
 12         $(function () {
 13             $('#btn01').click(function () {
 14                 $('#modal04').modal({
 15                     show:true,
 16                     backdrop:'static'
 17                 });
 18             })
 19         });
 20         $(function () {
 21             $('#shutoff').click(function () {
 22                 $('#modal04').modal('hide');
 23             })
 24         })
 25 
 26     </script>
 27 </head>
 28 <body>
 29     <div class="container">
 30         <div class="row">
 31             <button class="btn btn-primary" data-toggle="modal" data-target="#modal01">弹出大模态框</button>
 32             <button class="btn btn-primary" data-toggle="modal" data-target="#modal02">弹出中等模态框</button>
 33             <button class="btn btn-primary" data-toggle="modal" data-target="#modal03">弹出小模态框</button>
 34             <button class="btn btn-primary" id="btn01">js控制的弹框</button>
 35         </div>
 36     </div>
 37 
 38 
 39     <div class="modal fade" id="modal01">
 40         <div class="modal-dialog modal-lg">
 41             <div class="modal-content">
 42                 <div class="modal-header">
 43                     提示弹框
 44                 </div>
 45                 <div class="modal-body">
 46                     <p>文字内容</p>
 47                 </div>
 48                 <div class="modal-footer">
 49                     <button class="btn btn-primary">确定</button>
 50                     <button class="btn btn-default" data-dismiss="modal">取消</button>
 51                 </div>
 52             </div>
 53         </div>
 54     </div>
 55 
 56     <div class="modal fade" id="modal02">
 57         <div class="modal-dialog">
 58             <div class="modal-content">
 59                 <div class="modal-header">
 60                     提示弹框
 61                 </div>
 62                 <div class="modal-body">
 63                     <p>文字内容</p>
 64                 </div>
 65                 <div class="modal-footer">
 66                     <button class="btn btn-primary">确定</button>
 67                     <button class="btn btn-default" data-dismiss="modal">取消</button>
 68                 </div>
 69             </div>
 70         </div>
 71     </div>
 72 
 73     <div class="modal fade" id="modal03">
 74         <div class="modal-dialog modal-sm">
 75             <div class="modal-content">
 76                 <div class="modal-header">
 77                     提示弹框
 78                 </div>
 79                 <div class="modal-body">
 80                     <p>文字内容</p>
 81                 </div>
 82                 <div class="modal-footer">
 83                     <button class="btn btn-primary">确定</button>
 84                     <button class="btn btn-default" data-dismiss="modal">取消</button>
 85                 </div>
 86             </div>
 87         </div>
 88     </div>
 89 
 90     <div class="modal fade" id="modal04">
 91         <div class="modal-dialog">
 92             <div class="modal-content">
 93                 <div class="modal-header">
 94                     提示弹框
 95                 </div>
 96                 <div class="modal-body">
 97                     <p>js控制的弹框</p>
 98                 </div>
 99                 <div class="modal-footer">
100                     <button class="btn btn-primary">确定</button>
101                     <button class="btn btn-default" id="shutoff">取消</button>
102                 </div>
103             </div>
104         </div>
105     </div>
106 
107 </body>
108 </html>
View Code

 

posted @ 2020-04-28 18:32  组装梦想  阅读(159)  评论(0)    收藏  举报