快捷導(dǎo)航

Bootstrap源碼解讀模態(tài)彈出框（11）

更新時間：2016年12月28日 15:37:54 作者：藝術(shù)就是爆炸

這篇文章主要源碼解讀了Bootstrap模態(tài)彈出框，具有一定的參考價值，感興趣的小伙伴們可以參考一下

模態(tài)彈出框依賴于Bootstrap提供的js文件，可以單獨引入modal.js，也可以直接引入bootstrap.js。

模態(tài)彈出框的結(jié)構(gòu)

Bootstrap框架中的模態(tài)彈出框，使用了“modal”、“modal-dialog”和“modal-content”樣式。
“modal-content”中是彈出窗真正的內(nèi)容，主要包括三個部分：
彈出框頭部，使用“modal-header”，主要包括標(biāo)題和關(guān)閉按鈕
彈出框主體，使用“modal-body”，彈出框的主要內(nèi)容
彈出框腳部，使用“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">&times;</span><span
      class="sr-only">Close</span></button>
    <h4 class="modal-title">模態(tài)彈出窗標(biāo)題</h4>
   </div>
   <div class="modal-body">
    <p>模態(tài)彈出窗主體</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>

模態(tài)彈出窗樣式的關(guān)鍵是modal-content。modal-content主要設(shè)置了彈出窗的邊框、邊距、背景色和陰影，實現(xiàn)源碼如下：

.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，主要是控制一些間距的樣式。modal-footer一般是用來放置按鈕，所以底部還對包含的按鈕做了一定的樣式處理。實現(xiàn)源碼如下：

.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 .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;
}

模態(tài)彈出框的實現(xiàn)原理

模態(tài)彈出窗是固定在瀏覽器中的
實現(xiàn)源碼如下：

.modal {
 position: fixed;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
 z-index: 1040;
 display: none;
 overflow: hidden;
 -webkit-overflow-scrolling: touch;
 outline: 0;
}

在全屏狀態(tài)下，模態(tài)彈出窗寬度是自適應(yīng)的，而且modal-dialog水平居中。實現(xiàn)源碼如下：

.modal-dialog {
 position: relative;
 width: auto;
 margin: 10px;
}

當(dāng)瀏覽器視窗大于768px時，模態(tài)彈出窗的寬度為600px。實現(xiàn)源碼如下：

@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;
 }
}

模態(tài)彈出窗底部有一個透明的黑色蒙層效果，實現(xiàn)源碼如下：

.modal-backdrop {
 position: fixed;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
 background-color: #000;
}

它有一個過渡動畫，從fade到in，把opacity值從0變成了0.5。實現(xiàn)源碼如下：

.modal-backdrop.fade {
 filter: alpha(opacity=0);
 opacity: 0;
}
.modal-backdrop.in {
 filter: alpha(opacity=50);
 opacity: .5;
}

聲明式觸發(fā)模態(tài)彈出窗

使用button觸發(fā)

需要使用兩個屬性：data-toggle和data-target。data-toggle必須設(shè)置為modal；data-target一般情況設(shè)置為模態(tài)彈出窗的ID值。例如：

<button type="button" data-toggle="modal" data-target="#mymodal" class="btn btn-primary">觸發(fā)模態(tài)彈出窗</button>
<div class="modal" id="mymodal">
 <div class="modal-dialog">
  <div class="modal-content">
   <!-- 模態(tài)彈出窗內(nèi)容 -->
  </div>
 </div>
</div>

使用a標(biāo)簽觸發(fā)

鏈接元素自帶的href屬性可以替代data-target屬性，例如：

<a data-toggle="modal" href="#mymodal" class="btn btn-primary" >觸發(fā)模態(tài)彈出窗</a>
<div class="modal" id="mymodal" >
 <div class="modal-dialog" >
  <div class="modal-content" >
   <!-- 模態(tài)彈出窗內(nèi)容 -->
  </div>
 </div>
</div>

為彈出框增加過度動畫效果

給“.modal”增加類名“fade”即可。
實現(xiàn)源碼如下：

.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: translate(0, -25%);
  -ms-transform: translate(0, -25%);
  -o-transform: translate(0, -25%);
   transform: translate(0, -25%);
}
.modal.in .modal-dialog {
 -webkit-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  -o-transform: translate(0, 0);
   transform: translate(0, 0);
}

JavaScript代碼式觸發(fā)模態(tài)彈出框

例如：

<button type="button" class="btn btn-primary" id="mybtn">觸發(fā)模態(tài)彈出窗</button>
<div class="modal" id="mymodal">
 <div class="modal-dialog">
  <div class="modal-content">
   <!-- 模態(tài)彈出窗內(nèi)容 -->
  </div>
 </div>
</div>

然后添加Javascript代碼：

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

本文系列教程整理到：Bootstrap基礎(chǔ)教程專題中，歡迎點擊學(xué)習(xí)。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Bootstrap源碼解讀模態(tài)彈出框（11）

相關(guān)文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具