1.引入必須的css樣式和js文件
在引入bootstrap的js文件之前之前必須引入jquery的js文件
1 <link rel="stylesheet" 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>×</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…</p>
19 <p>One fine body…</p>
20 <p>One fine body…</p>
21 <p>One fine body…</p>
22 <p>One fine body…</p>
23 <p>One fine body…</p>
24 <p>One fine body…</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
