1.引入必须的css样式和js文件

在引入bootstrap的js文件之前之前必须引入jquery的js文件

1 <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
2 <!-- <link rel="stylesheet" href="css/bootstrap.min.css"> -->
3 <script src="js/jquery-2.1.4.min.js"></script>
4 <script type="text/javascript" src="js/bootstrap.min.js"></script>

2.模态框

模态框尽量作为<body>的直接子元素,从而避免其他组件对模态框的显示或者功能产生影响

2.1基本实例------使用按钮触发模态框

1.必须设置这几个属性data-toggle="modal" data-target="#myModal",("myModal是模态框的id")

2.fade表示产生模态框时的动画效果

3.如果希望关闭按钮起作用,要设置data-dismiss="modal"

4.modal-lg,modal-sm控制模态框的大小

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">开始演示模态框</button>
 1 <!-- 尽量将模态框作为body的直接子元素 -->
 2            <!-- fade表示产生模态框时的动画效果 -->
 3             <div class="modal fade" tabindex="-1" id="myModal">
 4                 <div class="modal-dialog modal-sm">
 5                     <div class="modal-content">
 6                         <!-- header-->
 7                         <div class="modal-header">
 8                             <!-- data-dismiss属性设置关闭模态框 -->
 9                             <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
10                                 <span>&times;</span>
11                             </button>
12                             <!-- title -->
13                              <h4 class="modal-title">Modal title</h4>
14                             
15                         </div>
16                         <!-- body -->                    
17                         <div class="modal-body">
18                              <p>One fine body&hellip;</p>
19                              <p>One fine body&hellip;</p>
20                              <p>One fine body&hellip;</p>
21                              <p>One fine body&hellip;</p>
22                              <p>One fine body&hellip;</p>
23                              <p>One fine body&hellip;</p>
24                              <p>One fine body&hellip;</p>
25                              <button type="button" class="btn btn-default">body中的按钮</button>
26                         </div>
27                         <div class="modal-footer">
28                             <button type="button" class="btn btn-default">保存</button>
29                             <button type="button" class="btn btn-success">删除</button>
30                         </div>
31                                             
32                     </div>                
33                 </div>
34             </div>

2.2 与栅格系统结合,可以在模态框中放入表单,按钮等组件

 1 　　　　　　　　　　　　　　<div class="modal-body">
 2                             <div class="row">
 3                                 <div class="col-md-3">col-md-3</div>
 4                                 <div class="col-md-3">col-md-3</div>                            
 5                                 <div class="col-md-3">col-md-3</div>
 6                                 <div class="col-md-3">col-md-3</div>
 7                             </div>
 8                             <div class="row">
 9                                 <div class="col-md-5">col-md-5</div>
10                                 <div class="col-lg-6">col-lg-6</div>
11                             </div>
12                         </div>
13                         <div class="modal-footer">
14                             <button type="button" class="btn btn-success">同意</button>
15                             <button type="button" class="btn btn-danger">拒绝</button>
16                             <button type="button" class="btn btn-info" data-dismiss="modal">关闭</button>
17                         </div>

 2.3使用js生成模态框

1.使用keyboard功能时必须先设置tabindex=-1(模态框的*div中)

2.remote方法是调用了jquery的load方法

1 　　　　　　$(function() {
2                 $("#myModal2").modal({
3                     show:true,
4                 //    remote:"demo33_modal.html",//载入某个页面的内容
5                     backdrop:"static", //设置为false或者static时点击外部区域都不会关闭模态框,但"static"提供了与true相同的灰色背景
6                     keyboard: true //按下esc时,退出模态框,必须设置tabindex=-1
7                 })
8             });

其他一些方法

1     //会使backdrop为true,remote失效
2         //    $("#myModal2").modal("toggle");
3             
4             
5         //    $("#myModal2").modal("hide");//show
6             
7             //在需要的情况下自动生成滚动条
8         //    $("#myModal2").modal("handleUpdate");

2.4模态框的事件

1.show.bs.modal在模态框出现前触发,shown.bs.modal则相反

2.hide.bs.modal在调用hide方法后触发,此时模态框还未消失

3.hidden.bs.modal在模态框消失后触发

 1　　　　　　 $("#myModal2").on("show.bs.modal",function(event) {
 2                 alert("即将开启一个模态框");
 3                 var button  = $(event.relatedTarget);
 4                 button.text("ok");//想要成功修改按钮的文字,要使用按钮触发模态框
 5             });
 6             
 7             $("#myModal2").on("shown.bs.modal",function(){
 8                 alert("已经开启了一个模态框");
 9             });
10         
11             $("#myModal2").modal("hide");
12         
13             $("#myModal2").on("hide.bs.modal",function(){
14                 alert("调用hide方法后立刻触发此事件");
15             });
16             
17             $("#myModal2").on("hidden.bs.modal",function() {
18                 alert("模态框已经消失了");
19             });
20