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