Bootstarp學習（二十三）模態彈出框（Modals）
這一小節我們先來講解一個“模態彈出框”，外掛的原始檔：modal.js。
右側程式碼編輯器（30行）就是單獨引入 bootstrap 中釋出出的“modal.js”檔案。
樣式程式碼：
? LESS版本：modals.less
? Sass版本：_modals.scss
? 編譯後的Bootstrap：對應bootstrap.css檔案第5375行～第5496行
在 Bootstrap 框架中把模態彈出框統一稱為 Modal。這種彈出框效果在大多數 Web 網站的互動中都可見。比如點選一個按鈕彈出一個框，彈出的框可能是一段檔案描述，也可能帶有按鈕操作，也有可能彈出的是一張圖片。如下圖所示：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>匯入JavaScript外掛</title> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> </head> <body> <button class="btn btn-primary" type="button">點選我</button> <div class="modal" id="mymodal"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> <h4 class="modal-title">模態彈出窗標題</h4> </div> <div class="modal-body"> <p>模態彈出窗主體內容</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">關閉</button> <button type="button" class="btn btn-primary">儲存</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal --> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script src="http://cdn.bootcss.com/bootstrap/2.3.1/js/bootstrap-transition.js"></script> <script src="http://cdn.bootcss.com/bootstrap/2.3.1/js/bootstrap-modal.js"></script> <script> $(function(){ $(".btn").click(function(){ $("#mymodal").modal("toggle"); }); }); </script> </body> </html>
Bootstrap框架中的模態彈出框，分別運用了“modal”、“modal-dialog”和“modal-content”樣式，而彈出窗真正的內容都放置在“modal-content”中，其主要又包括三個部分：
? 彈出框頭部，一般使用“modal-header”表示，主要包括標題和關閉按鈕
? 彈出框主體，一般使用“modal-body”表示，彈出框的主要內容
? 彈出框腳部，一般使用“modal-footer”表示，主要放置操作按鈕
如下圖所示：
模態彈出窗的結構如下：
<div class="modal show"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> <h4 class="modal-title">模態彈出窗標題</h4> </div> <div class="modal-body"> <p>模態彈出窗主體內容</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">關閉</button> <button type="button" class="btn btn-primary">儲存</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal -->
彈出窗的主體樣式實現：
但是對於一個模態彈出窗而言，modal-content才是樣式的關鍵。其主要設定了彈出窗的邊框、邊距、背景色和陰影等樣式。
/*bootstrap.css檔案第5412行～第5423行*/
.modal-content {
position: relative;
background-color: #fff;
-webkit-background-clip: padding-box;
background-clip: padding-box;
border: 1px solid #999;
border: 1px solid rgba(0, 0, 0, .2);
border-radius: 6px;
outline: 0;
-webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
}
除此之外，modal-content中的modal-header、modal-body和modal-footer三個部分樣式設定：
/*bootstrap.css檔案第5441行～第5461行*/
.modal-header {
min-height: 16.42857143px;
padding: 15px;
border-bottom: 1px solid #e5e5e5;
}
.modal-header .close {
margin-top: -2px;
}
.modal-title {
margin: 0;
line-height: 1.42857143;
}
.modal-body {
position: relative;
padding: 15px;
}
.modal-footer {
padding: 15px;
text-align: right;
border-top: 1px solid #e5e5e5;
}
這三個部分主要控制一些間距的樣式。而modal-footer都是用來放置按鈕，所以底部還對包含的按鈕做了一定的樣式處理。
/*bootstrap.css檔案第5462行～第5471行*/
.modal-footer .btn + .btn {
margin-bottom: 0;
margin-left: 5px;
}
.modal-footer .btn-group .btn + .btn {
margin-left: -1px;
}
.modal-footer .btn-block + .btn-block {
margin-left: 0;
}
實現原理解析：
bootstrap中的“模態彈出框”有以下幾個特點：
1、模態彈出窗是固定在瀏覽器中的。
2、單擊右側全屏按鈕，在全屏狀態下，模態彈出窗寬度是自適應的，而且modal-dialog水平居中。
3、當瀏覽器視窗大於768px時，模態彈出窗的寬度為600px。
固定在瀏覽器(原始碼)實現：
/*bootstrap.css檔案第5379行～第5389行*/
.modal {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1050;
display: none;
overflow: hidden;
-webkit-overflow-scrolling: touch;
outline: 0;
}
水平居中(原始碼)實現：
/*bootstrap.css檔案第5407行～第5411行*/
.modal-dialog {
position: relative;
width: auto;
margin: 10px;
}
當瀏覽器視窗大於768px時，模態彈出窗的寬度為600px（原始碼）實現：
/*bootstrap.css檔案第5479行～第5491行*/
@media (min-width: 768px) {
.modal-dialog {
width: 600px;
margin: 30px auto;
}
.modal-content {
-webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
}
.modal-sm {
width: 300px;
}
}
蒙板樣式實現：
大家或許注意到了，在做模態彈出窗時，底部常常會有一個透明的黑色蒙層效果，如下圖所示：
在Bootstrap框架中為模態彈出窗也添加了一個這樣的蒙層樣式“modal-backdrop”，只不過他預設情況下是全屏黑色的：
/*bootstrap.css檔案第5424行～第5432行*/
.modal-backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1040;
background-color: #000;
}
同樣，給其添加了一個過渡動畫，從fade到in，把opacity值從0變成了0.5。上圖展示的就是in狀態下的效果：
/*bootstrap.css檔案第5433行～第5440行*/
.modal-backdrop.fade {
filter: alpha(opacity=0);
opacity: 0;
}
.modal-backdrop.in {
filter: alpha(opacity=50);
opacity: .5;
}
兩種尺寸選擇：
除此之外，Bootstrap框架還為模態彈出窗提供了不同尺寸，一個是大尺寸樣式“modal-lg”，另一個是小尺寸樣式“modal-sm”。其結構上稍做調整：
<!-- 大尺寸模態彈出窗 -->
<div class="modal fade bs-example-modal-lg" tabindex="-1"role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<divclass="modal-dialog modal-lg">
<divclass="modal-content"> ... </div>
</div>
</div>
<!-- 小尺寸模態彈出窗 -->
<divclass="modal fade bs-example-modal-sm"tabindex="-1"role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
<divclass="modal-dialog modal-sm">
<divclass="modal-content"> ... </div>
</div>
</div>
來簡單的看一個示例效果：
對於這兩種尺寸的模態彈出窗，Bootstrap在媒體查詢中做過處理：程式碼同上見bootstrap.css
模態彈出框--觸發模態彈出窗2種方法
眾所周知，模態彈出窗在頁面載入完成時，是被隱藏在頁面中的，只有通過一定的動作（事件）才能觸發模態彈出窗的顯示。在Bootstrap框架中實現方法有2種，接下來分別來介紹這2種觸發模態彈出窗的使用方法。
宣告式觸發方法：
方法一：模態彈出窗宣告，只需要自定義兩個必要的屬性：data-toggle和data-target（bootstrap中宣告式觸發方法一般依賴於這些自定義的data-xxx 屬性。比如data-toggle="" 或者 data-dismiss=""）。例如：
<!-- 觸發模態彈出窗的元素 --> <button type="button" data-toggle="modal" data-target="#mymodal" class="btn btn-primary">點選我會彈出模態彈出窗</button> <!-- 模態彈出窗 --> <div class="modal fade" id="mymodal"> <div class="modal-dialog"> <div class="modal-content"> <!-- 模態彈出窗內容 --> </div> </div> </div>
注意以下事項：
1、data-toggle必須設定為modal(toggle中文翻譯過來就是觸發器)；
2、data-target可以設定為CSS的選擇符，也可以設定為模態彈出窗的ID值，一般情況設定為模態彈出窗的ID值，因為ID值是唯一的值。
方法二：觸發模態彈出窗也可以是一個連結<a>元素，那麼可以使用連結元素自帶的href屬性替代data-target屬性，如：
<!-- 觸發模態彈出窗的元素 --> <a data-toggle="modal" href="#mymodal" class=" btn btn-primary" >點選我會彈出模態彈出窗</a> <!-- 模態彈出窗 --> <div class="modal fade" id="mymodal" > <div class="modal-dialog" > <div class="modal-content" > <!-- 模態彈出窗內容 --> </div> </div> </div>
不過建議還是使用統一使用data-target的方式來觸發。
點選按鈕就能觸發彈出窗：
模態彈出框--為彈出框增加過度動畫效果
為模態彈出框增加過度動畫效果：
可通過給“.modal”增加類名“fade”為模態彈出框增加一個過渡動畫效果。
<button class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm"> 小的模態彈出窗 </button><div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true"> <div class="modal-dialog modal-sm"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> <h4 class="modal-title">模態彈出窗標題</h4> </div> <div class="modal-body"> <p>模態彈出窗主體內容</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">關閉</button> <button type="button" class="btn btn-primary">儲存</button> </div> </div> </div> </div>
原始碼實現：
/*bootstrap.css檔案第5390行～第5402行*/
.modal.fade .modal-dialog {
-webkit-transition: -webkit-transform .3s ease-out;
-o-transition: -o-transform .3s ease-out;
transition: transform .3s ease-out;
-webkit-transform: translate3d(0, -25%, 0);
-o-transform: translate3d(0, -25%, 0);
transform: translate3d(0, -25%, 0);
}
.modal.in .modal-dialog {
-webkit-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
原帖地址：http://www.bubuko.com/infodetail-653787.html