模態(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">×</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í)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點
疑難解答
