bootstrap模態彈出框

這一小節咱們先來說解一個「模態彈出框」，插件的源文件：modal.js。

右側代碼編輯器（30行）就是單獨引入 bootstrap 中發佈出的「modal.js」文件。

樣式代碼：

☑ LESS版本：modals.less

☑ Sass版本：_modals.scss

☑ 編譯後的Bootstrap：對應bootstrap.css文件第5375行～第5496行

在 Bootstrap 框架中把模態彈出框統一稱爲 Modal。這種彈出框效果在大多數 Web 網站的交互中均可見。好比點擊一個按鈕彈出一個框，彈出的框多是一段文件描述，也可能帶有按鈕操做，也有可能彈出的是一張圖片。以下圖所示：

模態彈出框--結構分析

Bootstrap框架中的模態彈出框，分別運用了「modal」、「modal-dialog」和「modal-content」樣式，而彈出窗真正的內容都放置在「modal-content」中，其主要又包括三個部分：

☑ 彈出框頭部，通常使用「modal-header」表示，主要包括標題和關閉按鈕

☑ 彈出框主體，通常使用「modal-body」表示，彈出框的主要內容

☑ 彈出框腳部，通常使用「modal-footer」表示，主要放置操做按鈕

模態彈出窗的結構以下：

<div class="modal show">     <div>         <div>             <div>                 <button type="button" data-dismiss="modal"><span aria-hidden="true">&times;</span><span>Close</span></button>                 <h4>模態彈出窗標題</h4>             </div>             <div>                 <p>模態彈出窗主體內容</p>             </div>             <div>                 <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中的「模態彈出框」有如下幾個特色：

一、模態彈出窗是固定在瀏覽器中的。

二、單擊右側全屏按鈕，在全屏狀態下，模態彈出窗寬度是自適應的，並且modal-dialog水平居中。

三、當瀏覽器視窗大於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>         <div>         <!-- 模態彈出窗內容 -->         </div>     </div> </div>

注意如下事項：

一、data-toggle必須設置爲modal(toggle中文翻譯過來就是觸發器)；

二、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 >         <div >         <!-- 模態彈出窗內容 -->         </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>             <div>                 <button type="button" data-dismiss="modal"><span aria-hidden="true">&times;</span><span>Close</span></button>                 <h4>模態彈出窗標題</h4>             </div>             <div>                 <p>模態彈出窗主體內容</p>             </div>             <div>                 <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); }

模態彈出框--模態彈出窗的使用（data-參數說明）

除了經過data-toggle和data-target來控制模態彈出窗以外，Bootstrap框架針對模態彈出框還提供了其餘自定義data-屬性，來控制模態彈出窗。好比說:是否有灰色背景modal-backdrop，是否能夠按ESC鍵關閉模態彈出窗。有關於Modal彈出窗自定義屬性相關說明以下所示：

 

avaScript觸發方法

除了使用自定義屬性觸發模態彈出框以外，還能夠經過JavaScript方法來觸發模態彈出窗。經過給一個元素一個事件，來觸發。好比說給一個按鈕一個單擊事件，而後觸發模態彈出窗。以下面的一個簡單示例：

<!-- 觸發模態彈出窗元素 --> <button class="btn btn-primary" type="button">點擊我</button> <!-- 模態彈出窗內容 --> <div id="mymodal">     <div>         <div>             <div>                 <button type="button" data-dismiss="modal"><span aria-hidden="true">&times;</span><span>Close</span></button>                 <h4>模態彈出窗標題</h4>             </div>             <div>                 <p>模態彈出窗主體內容</p>             </div>             <div>                 <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 -->

JavaScript觸發的彈出窗代碼：

$(function(){   $(".btn").click(function(){     $("#mymodal").modal();   }); });

好比你不想讓用戶按ESC鍵關閉模態彈出窗，你就能夠這樣作：

$(function(){     $(".btn").click(function(){         $("#mymodal").modal({             keyboard:false         });     }); });

事件調用方法也很是簡單：

$('#myModal').on('hidden.bs.modal', function (e) {     // 處理代碼... })