前面的話

在 Bootstrap 框架中把模態彈出框統一稱為 Modal。這種彈出框效果在大多數 Web 網站的交互中都可見。比如點擊一個按鈕彈出一個框，彈出的框可能是一段文件描述，也可能帶有按鈕操作，也有可能彈出的是一張圖片。本文將詳細介紹Bootstrap模態彈出框

結構分析

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

? 彈出框頭部，一般使用“modal-header”表示，主要包括標題和關閉按鈕

? 彈出框主體，一般使用“modal-body”表示，彈出框的主要內容

? 彈出框腳部，一般使用“modal-footer”表示，主要放置操作按鈕

×Close

模態彈出窗標題

模態彈出窗主體內容

關閉保存

對于彈窗而言，modal-content是樣式的關鍵。主要設置了彈窗的邊框、邊距、背景色和陰影等樣式.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-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都是用來放置按鈕，所以底部還對包含的按鈕做了一定的樣式處理.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框架中實現方法有2種

在介紹觸發方式之前，首先要說明.show和.fade這兩個方法。只有模態彈出窗默認是隱藏的，才能觸發其顯示.fade {opacity: 0;

-webkit-transition: opacity .15s linear;

-o-transition: opacity .15s linear;

transition: opacity .15s linear;

}.show {display: block!important;

}

【方法一】

模態彈出窗聲明，只需要自定義兩個必要的屬性：data-toggle和data-target(bootstrap中聲明式觸發方法一般依賴于這些自定義的data-xxx 屬性。比如data-toggle="" 或者 data-dismiss="")

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

data-target可以設置為CSS的選擇符，也可以設置為模態彈出窗的ID值，一般情況設置為模態彈出窗的ID值，因為ID值是唯一的值點擊

×Close

模態彈出窗標題

模態彈出窗主體內容

關閉保存

【方法二】

觸發模態彈出窗也可以是一個鏈接元素，那么可以使用鏈接元素自帶的href屬性替代data-target屬性

不過建議還是使用統一使用data-target的方式來觸發點擊

×Close

模態彈出窗標題

模態彈出窗主體內容

關閉保存

尺寸

Bootstrap框架為模態彈出窗提供了不同尺寸，一個是大尺寸樣式“modal-lg”，另一個是小尺寸樣式“modal-sm”。其結構上稍做調整

[注意].bs-example-modal-lg和.bs-example-modal-sm是自定義的名稱，而非必須

...

...

大尺寸默認尺寸小尺寸

小火柴的藍色理想

小火柴的藍色理想

小火柴的藍色理想

CSS解析

bootstrap中的“模態彈出框”有以下幾個特點：

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

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

3、當瀏覽器視窗大于768px時，模態彈出窗的寬度為600px

4、模態彈出窗的背景常常有一個透明的蒙層效果

5、觸發彈窗時，彈窗是從上到下、逐漸浮現到頁面前的

【固定在瀏覽器實現】.modal {

position: fixed;

top: 0;

right: 0;

bottom: 0;

left: 0;

z-index: 1050;

display: none;

overflow: hidden;

-webkit-overflow-scrolling: touch;

outline: 0;

}

【水平居中實現】.modal-dialog {

position: relative;

width: auto;

margin: 10px;

}

【當瀏覽器視窗大于768px時，模態彈出窗的寬度為600px實現】@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;

}}

【蒙版】

彈窗彈出時為

元素添加 .modal-open類，從而覆蓋頁面默認的滾動行為，并且還會自動生成一個 .modal-backdrop 元素用于提供一個可點擊的區域，點擊此區域就即可關閉模態框.modal-open {overflow: hidden;

}.modal-backdrop {

position: fixed;

top: 0;

right: 0;

bottom: 0;

left: 0;

z-index: 1040;

background-color: #000;

}

給其添加了一個過渡動畫，從fade到in，把opacity值從0變成了0.5.modal-backdrop.fade {

filter: alpha(opacity=0);

opacity: 0;

}.modal-backdrop.in {

filter: alpha(opacity=50);

opacity: .5;

}

【動畫效果】

彈窗的動畫內容是從-25%的top值位置到top:0的位置.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);

}

如果不需要模態框彈出時的動畫效果(淡入淡出效果)，刪掉 .fade 類即可點擊

×Close

模態彈出窗標題

模態彈出窗主體內容

關閉保存

參數說明

除了通過data-toggle和data-target來控制模態彈出窗之外，Bootstrap框架針對模態彈出框還提供了其他自定義data-屬性，來控制模態彈出窗。有關Modal彈出窗自定義屬性相關說明如下所示

該參數設置在按鈕上，或者彈窗上都可以。出于方便，一般地，在按鈕上設置

[注意]屬性值一定要加引號，如data-backdrop="false"

如果想要支持esc鍵關閉彈窗，需要在彈窗上設置tabindex="-1"

默認樣式無蒙版ESC失效彈窗默認不顯示

×Close

小火柴的藍色理想

好的代碼像粥一樣，都是用時間熬出來的

tabindex="-1" id="mymodal2">

×

Close

小火柴的藍色理想

好的代碼像粥一樣，都是用時間熬出來的

tabindex="-1" id="mymodal3">

×

Close

小火柴的藍色理想

好的代碼像粥一樣，都是用時間熬出來的

tabindex="-1" id="mymodal4">

×

Close

小火柴的藍色理想

好的代碼像粥一樣，都是用時間熬出來的

JS觸發

除了使用自定義屬性data-觸發模態彈出框之外，還可以通過JavaScript方法來觸發模態彈出窗。比如說給按鈕設置一個單擊事件，然后觸發模態彈出窗

只需一行 JavaScript 代碼，即可通過元素的 id myModal 調用模態框$('#myModal').modal()點擊

tabindex="-1" id="mymodal">

×

Close

小火柴的藍色理想

好的代碼像粥一樣，都是用時間熬出來的

使用JavaScript觸發模態彈出窗時，Bootstrap框架提供了一些設置，主要包括屬性設置、參數設置和事件設置

【屬性設置】

模態彈出窗默認支持的自定義屬性主要有

不想讓用戶按ESC鍵關閉模態彈出窗，可以這樣做$(function(){

$(".btn").click(function(){

$("#mymodal").modal({

keyboard:false});

});

});

【參數設置】

在Bootstrap框架中還為模態彈出窗提供了三種參數設置，具體說明如下

打開(關閉)

×

Close

小火柴的藍色理想

好的代碼像粥一樣，都是用時間熬出來的

$("#btn").click(function(){

$("#mymodal").modal("toggle");

});

});

【事件設置】

模態彈窗還支持五種類型的事件，分別是模態彈出窗的彈出前、彈出后，關閉前、關閉后及遠端數據加載后，具體描述如下：

打開

tabindex="-1" id="mymodal" >

×

Close

小火柴的藍色理想

好的代碼像粥一樣，都是用時間熬出來的

JS解析

【1】IIFE

使用立即調用函數，防止插件內代碼外泄，從而形成一個閉環，并且只能從jQuery的fn里進行擴展+function ($) {//使用es5嚴格模式'use strict';//}(window.jQuery);

【2】初始設置var Modal = function (element, options) {

this.options

= options//options是設置選項this.$body

= $(document.body)//body元素this.$element

= $(element)element表示modal彈出框容器及內容元素this.$dialog

= this.$element.find('.modal-dialog')//彈窗對象this.$backdrop

= null //蒙版對象this.isShown

= null //彈窗是否顯示的標識this.originalBodyPad

= null //body的padding-right標識this.scrollbarWidth

= 0 //滾動條寬度為0this.ignoreBackdropClick = false //默認蒙板可點擊

//如果設置了remote，就加載remote指定url的內容到modal-content樣式的元素內，并觸發loaded.bs.modal事件

if (this.options.remote) {

this.$element

.find('.modal-content')

.load(this.options.remote, $.proxy(function () {

this.$element.trigger('loaded.bs.modal')

}, this))

}

} //組件版本號3.3.7

Modal.VERSION = '3.3.7' //動畫持續時間300ms

Modal.TRANSITION_DURATION = 300 //蒙版動畫持續時間150ms

Modal.BACKDROP_TRANSITION_DURATION = 150 //默認設置

Modal.DEFAULTS = {

backdrop: true, //顯示蒙版keyboard: true, //按ESC鍵關閉彈窗show: true //單擊觸發元素時打開彈窗

}

【3】插件核心代碼

主要是Modal核心類函數的定義、默認參數的定義和9個原型方法的定義，這9個原型方法主要是處理彈窗的反轉、打開、關閉和彈窗背景設置、取消等操作// 反轉彈窗(打開或關閉)

Modal.prototype.toggle = function (_relatedTarget) {//如果彈窗處于顯示狀態，則調用hide()方法，關閉它；否則，調用show()方法，打開彈窗return this.isShown ? this.hide() : this.show(_relatedTarget)

} // 打開彈窗

Modal.prototype.show = function (_relatedTarget) {//保存this值var that = this//定義彈窗前的觸發事件

var e = $.Event('show.bs.modal', { relatedTarget: _relatedTarget })//打開彈窗前，觸發事件

this.$element.trigger(e)// 如果已經打開了(或者曾經被阻止過)，則退出執行，后續代碼不做處理

if (this.isShown || e.isDefaultPrevented())

return//設置彈窗顯示標識為true

this.isShown = truethis.checkScrollbar()this.setScrollbar()this.$body.addClass('modal-open')//處理鍵盤事件，主要是設置按esc鍵時是否關閉彈窗

this.escape()this.resize()// 如果單擊了元素內的子元素(帶有[data-dismiss="modal"]屬性)，則關閉彈窗

this.$element.on('click.dismiss.bs.modal', '[data-dismiss="modal"]', $.proxy(this.hide, this))//點擊彈窗時，如果鼠標的目標是當前彈窗，則將默認蒙板不可點擊的標識置為true，并不可再設置

this.$dialog.on('mousedown.dismiss.bs.modal', function () {

that.$element.one('mouseup.dismiss.bs.modal', function (e) {

if ($(e.target).is(that.$element)) that.ignoreBackdropClick = true })

})//繪制蒙版后，處理以下代碼this.backdrop(function () {

// 判斷瀏覽器是否支持動畫，并且彈窗是否設置了動畫過渡效果(是否有fade樣式)

var transition = $.support.transition && that.$element.hasClass('fade')

// 如果modal彈窗沒有父容器，則將它附加到body上

if (!that.$element.parent().length) {

that.$element.appendTo(that.$body)

} // 顯示modal彈窗 that.$element

.show()

.scrollTop(0)

that.adjustDialog() // 如果支持動畫，強制刷新UI現場，重繪彈窗 if (transition) {

that.$element[0].offsetWidth

} // 給modal彈窗添加in樣式，和modal樣式一起 that.$element.addClass('in') // 強制給彈窗設定焦點 that.enforceFocus() // 打開彈窗顯示后的觸發事件 var e = $.Event('shown.bs.modal', { relatedTarget: _relatedTarget })

transition ?that.$dialog //找到彈窗元素 .one('bsTransitionEnd', function () {// 如果支持動畫，則動畫結束以后給彈窗內的元素設置焦點，并觸發shown事件that.$element.trigger('focus').trigger(e)

})

.emulateTransitionEnd(Modal.TRANSITION_DURATION) :// 否則直接設置焦點，并觸發shown事件 that.$element.trigger('focus').trigger(e)

})

} // 關閉彈窗

Modal.prototype.hide = function (e) {//阻止冒泡

if (e) e.preventDefault()//定義關閉彈窗前的觸發事件

e = $.Event('hide.bs.modal')//關閉彈窗前觸發事件

this.$element.trigger(e)// 如果已經關閉了(或者曾經被阻止過)，則退出執行，后續代碼不做處理

if (!this.isShown || e.isDefaultPrevented()) return//設置顯示狀態標識為false

this.isShown = false//處理鍵盤事件，主要是設置按Esc鍵的時候是否關閉彈窗

this.escape()this.resize()//取消所有的focusin.bs.modal事件

$(document).off('focusin.bs.modal')this.$element

.removeClass('in') //刪除in樣式

.off('click.dismiss.bs.modal') //取消dismiss的單擊事件

.off('mouseup.dismiss.bs.modal')//取消dismiss的鼠標抬起事件//取消dismiss的鼠標放下事件

this.$dialog.off('mousedown.dismiss.bs.modal')//如果支持動畫，則動畫結束以后再關閉，否則直接關閉

$.support.transition && this.$element.hasClass('fade') ? this.$element

.one('bsTransitionEnd', $.proxy(this.hideModal, this))

.emulateTransitionEnd(Modal.TRANSITION_DURATION) : this.hideModal()

} //強制彈窗處于焦點狀態

Modal.prototype.enforceFocus = function () {

$(document) // 禁用所有的focusin事件，防止無限循環 .off('focusin.bs.modal')

.on('focusin.bs.modal', $.proxy(function (e) {

if (this.$element[0] !== e.target && !this.$element.has(e.target).length) {

// 如果處于焦點的元素不是當前元素(或不包含當前元素)，則強制給當前元素設置焦點

this.$element.trigger('focus')

}

}, this))

} //按Esc鍵是否退出的處理

Modal.prototype.escape = function () {

if (this.isShown && this.options.keyboard) { //如果彈窗是打開狀態，并且keyboard選項為true，則說明允許按ESC鍵可以關閉彈窗

this.$element.on('keydown.dismiss.bs.modal', $.proxy(function (e) {//檢測鍵盤事件，如果是ESC(keycode=27)，則關閉

e.which == 27 && this.hide()

}, this))

} else if (!this.isShown) { // 否則，取消鍵盤事件檢測

this.$element.off('keydown.dismiss.bs.modal')

}

}

Modal.prototype.resize = function () {if (this.isShown) {

$(window).on('resize.bs.modal', $.proxy(this.handleUpdate, this))

} else {

$(window).off('resize.bs.modal')

}

} //關閉彈窗

Modal.prototype.hideModal = function () {

var that = this//關閉彈窗

this.$element.hide()this.backdrop(function () { //移除body上的modal-open樣式

that.$body.removeClass('modal-open')

that.resetAdjustments()

that.resetScrollbar() //關閉以后，觸發hidden事件

that.$element.trigger('hidden.bs.modal')

})

}

//刪除蒙版，關閉彈窗時觸發

Modal.prototype.removeBackdrop = function () {// 刪除蒙版

this.$backdrop && this.$backdrop.remove()// 設置蒙版對象為null

this.$backdrop = null

}

//添加蒙版，打開彈窗時觸發

Modal.prototype.backdrop = function (callback) {

var that = this//是否設置了動畫過渡效果，如果是則將animate設置為fade

var animate = this.$element.hasClass('fade') ? 'fade' : ''//如果是打開狀態，并且設置了backdrop參數

if (this.isShown && this.options.backdrop) { //定義動畫標識

var doAnimate = $.support.transition && animate // 在body上定義蒙版p元素，并附加fade標識以支持動畫

this.$backdrop = $(document.createElement('p'))

.addClass('modal-backdrop ' + animate)

.appendTo(this.$body) //蒙版被單擊時進行判斷：如果backdrop參數為static，則強制將彈窗設置為售點；否則，關閉彈窗

this.$element.on('click.dismiss.bs.modal', $.proxy(function (e) {if (this.ignoreBackdropClick) {

this.ignoreBackdropClick = false return}if (e.target !== e.currentTarget) returnthis.options.backdrop == 'static'

? this.$element[0].focus()

: this.hide()

}, this)) // 如果支持動畫，強制刷新UI現場，重繪彈窗 if (doAnimate) this.$backdrop[0].offsetWidth

//添加in樣式 this.$backdrop.addClass('in') //如果沒有回調，則直接返回

if (!callback)

return // 如果支持動畫，則動畫結束執行回調函數；否則，直接執行回調函數

doAnimate ?this.$backdrop

.one('bsTransitionEnd', callback)

.emulateTransitionEnd(Modal.BACKDROP_TRANSITION_DURATION) :

callback() //如果是關閉狀態，但蒙版對象依然還存在

}

else if (!this.isShown && this.$backdrop) { //去除in樣式

this.$backdrop.removeClass('in')

var callbackRemove = function () {

that.removeBackdrop()

callback && callback()

} // 如果支持動畫，則動畫結束執行回調函數；否則，直接執行回調函數

$.support.transition && this.$element.hasClass('fade') ?this.$backdrop

.one('bsTransitionEnd', callbackRemove)

.emulateTransitionEnd(Modal.BACKDROP_TRANSITION_DURATION) :

callbackRemove()

} else if (callback) {

callback()

}

}

【4】滾動條處理

在彈窗插件中，使用了大量的代碼對滾動條進行處理Modal.prototype.handleUpdate = function () {this.adjustDialog()

} //處理因為滾動條而使彈窗位置不固定問題

Modal.prototype.adjustDialog = function () {//如果元素的高度大于頁面的高度，即溢出屏幕，則modalIsOverflowing置為true

var modalIsOverflowing = this.$element[0].scrollHeight > document.documentElement.clientHeight//將元素的paddingLeft和paddingRight設置為scrollbarWidth

this.$element.css({

paddingLeft: !this.bodyIsOverflowing && modalIsOverflowing ? this.scrollbarWidth : '',

paddingRight: this.bodyIsOverflowing && !modalIsOverflowing ? this.scrollbarWidth : ''})

} //重置調節器

Modal.prototype.resetAdjustments = function () {//將元素的paddingLeft和paddingRight置為空this.$element.css({

paddingLeft: '',

paddingRight: ''})

} //檢查滾動條

Modal.prototype.checkScrollbar = function () {//fullWindowWidth儲存頁面寬度

var fullWindowWidth = window.innerWidth//IE8-瀏覽器不支持innerWidth屬性

if (!fullWindowWidth) { //使用getBoundingClientRect方法來獲得頁面寬度

var documentElementRect = document.documentElement.getBoundingClientRect()

fullWindowWidth = documentElementRect.right - Math.abs(documentElementRect.left)

}//如果有滾動條，則bodyIsOverflowing置為true

this.bodyIsOverflowing = document.body.clientWidth < fullWindowWidth//將scrollbarWidth置為實際的滾動條寬度

this.scrollbarWidth = this.measureScrollbar()

} //用來為body元素設置padding-right的值，防止body元素被scrollbar阻擋

Modal.prototype.setScrollbar = function () {

var bodyPad = parseInt((this.$body.css('padding-right') || 0), 10)this.originalBodyPad = document.body.style.paddingRight || ''//如果頁面存在滾動條，則body的padding-right設置為默認的padding-right加上滾動條的寬度

if (this.bodyIsOverflowing)

this.$body.css('padding-right', bodyPad + this.scrollbarWidth)

} //重置滾動條

Modal.prototype.resetScrollbar = function () {//將body的padding-right值設置為null

this.$body.css('padding-right', this.originalBodyPad)

}

//測量滾動條寬度

Modal.prototype.measureScrollbar = function () {var scrollDiv = document.createElement('p')

scrollDiv.className = 'modal-scrollbar-measure'this.$body.append(scrollDiv)//滾動條寬度等于offetWidth

- clientWidthvar scrollbarWidth = scrollDiv.offsetWidth

- scrollDiv.clientWidththis.$body[0].removeChild(scrollDiv)return scrollbarWidth

}

【5】jQuery插件定義

在jQuery上定義插件，有點特殊的代碼是options參數的收集和合并，主要收集了3個部分：插件的默認參數DEFAULTS、modal元素上的data-屬性，執行插件時傳入的option對象，這三個部分的優先級依次升高function Plugin(option, _relatedTarget) {//根據選擇器，遍歷所有符合規則的元素

return this.each(function () {

var $this = $(this) //獲取自定義屬性bs.modal的值

var data = $this.data('bs.modal') //將插件的默認參數DEFAULTS、modal元素上的data-屬性，執行插件時傳入的option對象，這三種值合并到一起，作為options參數 //后面的參數的優先級高于前面的參數

var options = $.extend({}, Modal.DEFAULTS, $this.data(), typeof option == 'object' && option)

//如果值不存在，則將Modal實例設置為bs.modal值 if (!data) $this.data('bs.modal', (data = new Modal(this, options)))

//如果option傳遞了string，則表示要執行某個方法

if (typeof option == 'string') data[option](_relatedTarget) else if (options.show) data.show(_relatedTarget)

})

} var old = $.fn.modal //保留其他庫的$.fn.modal代碼(如果定義的話)，以便在noConflict之后可以繼續使用該老代碼

$.fn.modal = Plugin

//重設插件構造器，可以通過該屬性獲取插件的真實類函數

$.fn.modal.Constructor = Modal

【6】防沖突處理$.fn.modal.noConflict = function () {//恢復以前的舊代碼$.fn.modal = old//將$.fn.modal.noConflict()設置為Bootstrap的Modal插件return this

}

【7】綁定觸發事件//監測所有擁有自定義屬性data-toggle="modal"的元素上的單擊事件

$(document).on('click.bs.modal.data-api', '[data-toggle="modal"]', function (e) {

var $this = $(this)//獲取href屬性值

var href = $this.attr('href')//獲取data-target屬性值，如果沒有，則獲取href值，該值是所彈出元素的idvar

$target = $($this.attr('data-target') || (href && href.replace(/.*(?=#[^\s]+$)/, ''))) //如果彈窗元素上已經彈窗實例(即彈出過一次了)，則設置option值為字符串toggle，否則將remote值(如果有的話)、彈窗元素上的自定義屬性值集合、觸發元素上的自定義屬性值集合，合并為option對象var option = $target.data('bs.modal') ? 'toggle' : $.extend({ remote: !/#/.test(href) && href }, $target.data(), $this.data())//如果是a鏈接，則阻止其默認行為if ($this.is('a')) e.preventDefault()

$target.one('show.bs.modal', function (showEvent) { if (showEvent.isDefaultPrevented()) return

//定義一次hidden事件，給所單擊元素設置focus $target.one('hidden.bs.modal', function () {

$this.is(':visible') && $this.trigger('focus')

})

})

Plugin.call($target, option, this)

})

}(jQuery);

總結

以上是生活随笔為你收集整理的bootstrap获取弹框数据_Bootstrap模态弹出框的实例教程的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。