Bootstrap源碼解讀模態(tài)彈出框（11）
模態(tài)彈出框依賴(lài)于Bootstrap提供的js文件，可以單獨(dú)引入modal.js，也可以直接引入bootstrap.js。
模態(tài)彈出框的結(jié)構(gòu)
Bootstrap框架中的模態(tài)彈出框，使用了“modal”、“modal-dialog”和“modal-content”樣式。
“modal-content”中是彈出窗真正的內(nèi)容，主要包括三個(gè)部分：
彈出框頭部，使用“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">×</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è)置了彈出窗的邊框、邊距、背景色和陰影，實(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一般是用來(lái)放置按鈕，所以底部還對(duì)包含的按鈕做了一定的樣式處理。實(shí)現(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)彈出框的實(shí)現(xiàn)原理
模態(tài)彈出窗是固定在瀏覽器中的
實(shí)現(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水平居中。實(shí)現(xiàn)源碼如下：
.modal-dialog {
position: relative;
width: auto;
margin: 10px;
}
當(dāng)瀏覽器視窗大于768px時(shí)，模態(tài)彈出窗的寬度為600px。實(shí)現(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)彈出窗底部有一個(gè)透明的黑色蒙層效果，實(shí)現(xiàn)源碼如下：
.modal-backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #000;
}
它有一個(gè)過(guò)渡動(dòng)畫(huà)，從fade到in，把opacity值從0變成了0.5。實(shí)現(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ā)
需要使用兩個(gè)屬性：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>
為彈出框增加過(guò)度動(dòng)畫(huà)效果
給“.modal”增加類(lèi)名“fade”即可。
實(shí)現(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ǔ)教程 專(zhuān)題中，歡迎點(diǎn)擊學(xué)習(xí)。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
- bootstrap modal彈出框的垂直居中
- Bootstrap彈出框modal上層的輸入框不能獲得焦點(diǎn)問(wèn)題的解決方法
- Bootstrap實(shí)現(xiàn)帶動(dòng)畫(huà)過(guò)渡的彈出框
- Bootstrap教程JS插件彈出框?qū)W習(xí)筆記分享
- 簡(jiǎn)介BootStrap model彈出框的使用
- JS組件Bootstrap實(shí)現(xiàn)彈出框效果代碼
- Bootstrap每天必學(xué)之彈出框（Popover）插件
- BootStrap的彈出框(Popover)支持鼠標(biāo)移到彈出層上彈窗層不隱藏的原因及解決辦法
- 關(guān)于Bootstrap彈出框無(wú)法調(diào)用問(wèn)題的解決辦法
- JS組件Bootstrap實(shí)現(xiàn)彈出框和提示框效果代碼
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了js表單驗(yàn)證，JavaScript 可用來(lái)在數(shù)據(jù)被送往服務(wù)器前對(duì)HTML 表單中的這些輸入數(shù)據(jù)進(jìn)行驗(yàn)證，感興趣的小伙伴們可以參考一下2016-03-03
js有效數(shù)字 顯示指定位數(shù)...2007-09-09
js實(shí)現(xiàn)時(shí)鐘定時(shí)器
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)時(shí)鐘定時(shí)器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-03-03
簡(jiǎn)單了解TypeScript中如何繼承 Error 類(lèi)
這篇文章主要介紹了簡(jiǎn)單了解TypeScript中如何繼承 Error 類(lèi)，一個(gè)典型的網(wǎng)站服務(wù)器可能需要有 NetworkError, DatabaseError, UnauthorizedError 等。 我們希望這些類(lèi)都擁有 Error 的特性：有錯(cuò)誤消息、有調(diào)用棧、有方便打印的 toString 等。,需要的朋友可以參考下2019-06-06
bootstrapfileinput實(shí)現(xiàn)文件自動(dòng)上傳
這篇文章主要介紹了bootstrapfileinput實(shí)現(xiàn)文件自動(dòng)上傳,bootstrap fileinput插件對(duì)多種類(lèi)型的文件提供文件預(yù)覽，并且提供了多選等功能,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-11-11
用JS將搜索的關(guān)鍵字高亮顯示實(shí)現(xiàn)代碼
這篇文章介紹了JS將搜索的關(guān)鍵字高亮顯示實(shí)現(xiàn)代碼，有需要的朋友可以參考一下2013-11-11
這篇文章主要介紹了詳解webpack 如何集成第三方j(luò)s庫(kù)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
JavaScript使用Promise實(shí)現(xiàn)并發(fā)請(qǐng)求數(shù)限制
本文主要介紹了JavaScript使用Promise實(shí)現(xiàn)并發(fā)請(qǐng)求數(shù)限制，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
本文主要介紹了JavaScript中清空數(shù)組的三種方式。具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧2017-03-03
javascript獲取ckeditor編輯器的值(實(shí)現(xiàn)代碼)
這篇文章主要介紹了javascript獲取ckeditor編輯器的值，用于表單驗(yàn)證。需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2013-11-11