Bootstrap模態(tài)窗口源碼解析
更新時(shí)間：2017年02月08日 15:55:20 作者：我是路飛同志們
這篇文章主要為大家詳細(xì)解析了Bootstrap模態(tài)窗口源碼，基本每行都加了注釋，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
前言：
bootstrap的 js插件的源碼寫(xiě)的非常好，也算是編寫(xiě)jquery插件的模范寫(xiě)法，本來(lái)還想大篇詳細(xì)的分析一下呢，唉，沒(méi)時(shí)間啊，很早之前看過(guò)的源碼了，現(xiàn)在貼在了博客上，
300來(lái)行的代碼，其中有很多jquery的高級(jí)用法，建議，從github上下載一下源碼，然后把本篇的代碼復(fù)制過(guò)去，然后，邊運(yùn)行，邊閱讀，如果有不明白的地方，可以給我留言，我給解答。
下面是基本每行都加了注釋，供大家參考，具體內(nèi)容如下
/* ========================================================================
* Bootstrap: modal.js v3.3.7
* http://getbootstrap.com/javascript/#modals
* ========================================================================
* Copyright 2011-2016 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
* ======================================================================== */
+function ($) {
'use strict';
// MODAL CLASS DEFINITION
// ======================
var Modal = function (element, options) {//modal類：首先是Modal的構(gòu)造函數(shù)，里面聲明了需要用到的變量，隨后又設(shè)置了一些常量。
this.options = options
this.$body = $(document.body)
this.$element = $(element)
this.$dialog = this.$element.find('.modal-dialog')
this.$backdrop = null
this.isShown = null
this.originalBodyPad = null
this.scrollbarWidth = 0
this.ignoreBackdropClick = false//忽略遮罩成點(diǎn)擊嗎，不忽略，即：點(diǎn)擊遮罩層退出模態(tài)
if (this.options.remote) {//這是遠(yuǎn)端調(diào)用數(shù)據(jù)的情況，用遠(yuǎn)端模板來(lái)填充模態(tài)框
this.$element
.find('.modal-content')
.load(this.options.remote, $.proxy(function () {
this.$element.trigger('loaded.bs.modal')//觸發(fā)加載完數(shù)據(jù)時(shí)的監(jiān)聽(tīng)函數(shù)
}, this))
}
}
Modal.VERSION = '3.3.7'
Modal.TRANSITION_DURATION = 300 //transition duration 過(guò)度時(shí)間
Modal.BACKDROP_TRANSITION_DURATION = 150 //背景過(guò)度時(shí)間
Modal.DEFAULTS = {//defaults 默認(rèn)值
backdrop: true,//有無(wú)遮罩層
keyboard: true,//鍵盤(pán)上的 esc 鍵被按下時(shí)關(guān)閉模態(tài)框。
show: true//模態(tài)框初始化之后就立即顯示出來(lái)。
}
//變量設(shè)置完畢，接著就該上函數(shù)了。Modal的擴(kuò)展函數(shù)有這么幾個(gè)：
//toggel，show，hide，enforceFocus，escape，resize，hideModal，removeBackdrop，
//backdrop，handleUpdate，adjustDialog，resetAdjustments，checkScrollbar，setScrollbar，resetScrollbar，
//measureScrollbar終于列完了，恩一共是16個(gè)。toggel函數(shù)比較簡(jiǎn)單，是一個(gè)顯示和隱藏的切換函數(shù)。代碼如下
Modal.prototype.toggle = function (_relatedTarget) {
return this.isShown ? this.hide() : this.show(_relatedTarget)
}
Modal.prototype.show = function (_relatedTarget) {
var that = this
var e = $.Event('show.bs.modal', { relatedTarget: _relatedTarget })//觸發(fā) 尾行注冊(cè)的show.bs.modal事件，并給relatedTarget賦值 $.Event 創(chuàng)建事件對(duì)象的目的就是可以給他任意賦值
this.$element.trigger(e)//
if (this.isShown || e.isDefaultPrevented()) return//如果已經(jīng)顯示就返回
this.isShown = true//標(biāo)記
this.checkScrollbar()//核對(duì)是否有滾動(dòng)條，并且測(cè)量滾動(dòng)條寬度（非x軸）
this.setScrollbar()//如果有滾動(dòng)條，就給body一個(gè)padding-right 是一個(gè)滾動(dòng)條的寬度，這一步的目的是為了呼應(yīng)，下面的去掉y軸滾動(dòng)條
this.$body.addClass('modal-open')//接著為body元素添加modal-open類、即去掉y軸滾動(dòng)條，頁(yè)面就會(huì)往右一個(gè)滾動(dòng)條的寬度，
this.escape()//按esc退出模態(tài)
this.resize()//窗口大小調(diào)整，窗口大小改變，模態(tài)框也跟著變
this.$element.on('click.dismiss.bs.modal', '[data-dismiss="modal"]', $.proxy(this.hide, this))//注冊(cè)右上角關(guān)閉事件
this.$dialog.on('mousedown.dismiss.bs.modal', function () {//在dialog中按下鼠標(biāo)，在父元素中抬起 忽略： 在模態(tài)中按下鼠標(biāo)，在遮罩層中抬起鼠標(biāo)
that.$element.one('mouseup.dismiss.bs.modal', function (e) {//在父元素中抬起
if ($(e.target).is(that.$element)) that.ignoreBackdropClick = true
})
})
this.backdrop(function () {//遮罩層：真的是一個(gè)壓軸函數(shù)，，，， 這個(gè)回調(diào)函數(shù)是遮罩完畢后運(yùn)行的函數(shù)
var transition = $.support.transition && that.$element.hasClass('fade')
if (!that.$element.parent().length) {
that.$element.appendTo(that.$body) // don't move modals dom position
}
that.$element
.show()
.scrollTop(0)//show 并且 弄到頂部
that.adjustDialog()//調(diào)整對(duì)話框
if (transition) {
that.$element[0].offsetWidth // force reflow
}
that.$element.addClass('in')
that.enforceFocus()
var e = $.Event('shown.bs.modal', { relatedTarget: _relatedTarget })
transition ?
that.$dialog // wait for modal to slide in
.one('bsTransitionEnd', function () {
that.$element.trigger('focus').trigger(e)//模態(tài)過(guò)度完成后，觸發(fā)foucus 和shown.bs.modal
})
.emulateTransitionEnd(Modal.TRANSITION_DURATION) :
that.$element.trigger('focus').trigger(e)//否則直接進(jìn)行
})
}
Modal.prototype.hide = function (e) {//他的存在就是一個(gè)事件監(jiān)聽(tīng)函數(shù)，所以可以加e 下面是模態(tài)窗口關(guān)閉處理函數(shù)
if (e) e.preventDefault()//取消默認(rèn)行為
e = $.Event('hide.bs.modal')//無(wú)論什么事件進(jìn)入這里都換成 'hide.bs.modal' 媽的這樣就通用了，，，無(wú)論是點(diǎn)擊“x”，還是取消，確定，都這么處理，
this.$element.trigger(e)//處發(fā)hide
if (!this.isShown || e.isDefaultPrevented()) return
this.isShown = false//恢復(fù)初始的false
this.escape()//移除esc事件
this.resize()//移除為window綁定的resize事件
$(document).off('focusin.bs.modal')//
this.$element
.removeClass('in')
.off('click.dismiss.bs.modal')
.off('mouseup.dismiss.bs.modal')
this.$dialog.off('mousedown.dismiss.bs.modal')//該移除的都移除
$.support.transition && this.$element.hasClass('fade') ?
this.$element
.one('bsTransitionEnd', $.proxy(this.hideModal, this))//到了這里，雖然模態(tài)已經(jīng)沒(méi)有了，但僅僅是把透明度改為0了，this.hideModal才是真正移除
.emulateTransitionEnd(Modal.TRANSITION_DURATION) :
this.hideModal()
}
Modal.prototype.enforceFocus = function () {//模態(tài)框獲得焦點(diǎn)
$(document)
.off('focusin.bs.modal') // guard against infinite focus loop
.on('focusin.bs.modal', $.proxy(function (e) {
if (document !== e.target &&
this.$element[0] !== e.target &&
!this.$element.has(e.target).length) {
this.$element.trigger('focus')
}
}, this))
}
Modal.prototype.escape = function () {//鍵盤(pán)上的 esc 鍵被按下時(shí)關(guān)閉模態(tài)框。
if (this.isShown && this.options.keyboard) {//僅在模態(tài)窗顯示的時(shí)候才注冊(cè)這個(gè)事件
this.$element.on('keydown.dismiss.bs.modal', $.proxy(function (e) {//不僅可以把事件穿過(guò)來(lái)，。。。牛
e.which == 27 && this.hide()//27 時(shí)調(diào)用hide方法（ps：比if省事多了，高手就是高手）
}, this))
} else if (!this.isShown) {//否則移除他，感覺(jué)怪怪的，不管了
this.$element.off('keydown.dismiss.bs.modal')
}
}
Modal.prototype.resize = function () {//為你window resize注冊(cè)事件
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 () {
that.$body.removeClass('modal-open')
that.resetAdjustments()
that.resetScrollbar()
that.$element.trigger('hidden.bs.modal')
})
}
Modal.prototype.removeBackdrop = function () {
this.$backdrop && this.$backdrop.remove()
this.$backdrop = null
}
Modal.prototype.backdrop = function (callback) {
var that = this
var animate = this.$element.hasClass('fade') ? 'fade' : ''//是否有fade動(dòng)畫(huà)類
if (this.isShown && this.options.backdrop) {//條件：正在show，并且有遮罩層
var doAnimate = $.support.transition && animate// do的條件是支持css3過(guò)度和有fade class
this.$backdrop = $(document.createElement('div'))//創(chuàng)建遮罩層div
.addClass('modal-backdrop ' + animate)//添加 modal-backdrop 和fade class
.appendTo(this.$body)//加到body底部下面（待定其他版本可能加在模態(tài)里面）
this.$element.on('click.dismiss.bs.modal', $.proxy(function (e) {//點(diǎn)擊模態(tài)窗口處理事件：
if (this.ignoreBackdropClick) {
this.ignoreBackdropClick = false
return
}
if (e.target !== e.currentTarget) return//如果沒(méi)有點(diǎn)擊模態(tài)，則不做處理
this.options.backdrop == 'static'
? this.$element[0].focus()//指定靜態(tài)的背景下，不關(guān)閉模式點(diǎn)擊
: this.hide()//否則 關(guān)閉模態(tài)
}, this))
if (doAnimate) this.$backdrop[0].offsetWidth // force reflow 英文翻譯 強(qiáng)迫回流，，，先不管
this.$backdrop.addClass('in')//添加in 0.5的透明度
if (!callback) return
doAnimate ?
this.$backdrop
.one('bsTransitionEnd', callback)
.emulateTransitionEnd(Modal.BACKDROP_TRANSITION_DURATION) ://如果有fade動(dòng)畫(huà)的話 就給遮罩層綁定一個(gè)遮罩過(guò)度時(shí)間，為什么要這么寫(xiě)以后聊
callback()
} else if (!this.isShown && this.$backdrop) {
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()
}
}
// these following methods are used to handle overflowing modals
Modal.prototype.handleUpdate = function () {
this.adjustDialog()
}
Modal.prototype.adjustDialog = function () {//處理因?yàn)闈L動(dòng)條而使模態(tài)位置的不和諧問(wèn)題
var modalIsOverflowing = this.$element[0].scrollHeight > document.documentElement.clientHeight//模態(tài)是否溢出屏幕，即高度大于客戶端高度
this.$element.css({
paddingLeft: !this.bodyIsOverflowing && modalIsOverflowing ? this.scrollbarWidth : '',
paddingRight: this.bodyIsOverflowing && !modalIsOverflowing ? this.scrollbarWidth : ''
})
}
Modal.prototype.resetAdjustments = function () {
this.$element.css({
paddingLeft: '',
paddingRight: ''
})
}
Modal.prototype.checkScrollbar = function () {
var fullWindowWidth = window.innerWidth
if (!fullWindowWidth) { // workaround for missing window.innerWidth in IE8
var documentElementRect = document.documentElement.getBoundingClientRect()
fullWindowWidth = documentElementRect.right - Math.abs(documentElementRect.left)
}
this.bodyIsOverflowing = document.body.clientWidth < fullWindowWidth//即是否有滾動(dòng)條
this.scrollbarWidth = this.measureScrollbar()
}
Modal.prototype.setScrollbar = function () {//用來(lái)為body元素設(shè)置padding-right的值，防止body的元素被scrollbar阻擋
var bodyPad = parseInt((this.$body.css('padding-right') || 0), 10)
this.originalBodyPad = document.body.style.paddingRight || ''
if (this.bodyIsOverflowing) this.$body.css('padding-right', bodyPad + this.scrollbarWidth)
}
Modal.prototype.resetScrollbar = function () {
this.$body.css('padding-right', this.originalBodyPad)
}
Modal.prototype.measureScrollbar = function () { // thx walsh 測(cè)量 Scrollbar
var scrollDiv = document.createElement('div')
scrollDiv.className = 'modal-scrollbar-measure'
this.$body.append(scrollDiv)
var scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth
this.$body[0].removeChild(scrollDiv)
return scrollbarWidth
}
// MODAL PLUGIN DEFINITION
// =======================
function Plugin(option, _relatedTarget) {
return this.each(function () {
var $this = $(this)
var data = $this.data('bs.modal')//如果是第二次打開(kāi)模態(tài)窗口，這個(gè)數(shù)據(jù)才會(huì)有
var options = $.extend({}, Modal.DEFAULTS, $this.data(), typeof option == 'object' && option)//合并一下默認(rèn)參數(shù)
//
if (!data) $this.data('bs.modal', (data = new Modal(this, options)))//把modal對(duì)象存起來(lái)，避免第二次打開(kāi)時(shí)在new對(duì)象，這點(diǎn)值得學(xué)習(xí)
if (typeof option == 'string') data[option](_relatedTarget)/*這里是區(qū)分option是對(duì)象和字符串的情況*/
else if (options.show) data.show(_relatedTarget)
})
}
var old = $.fn.modal
$.fn.modal = Plugin
$.fn.modal.Constructor = Modal
// MODAL NO CONFLICT
// =================
$.fn.modal.noConflict = function () {
$.fn.modal = old
return this
}
// MODAL DATA-API 這里是不用一行js代碼就實(shí)現(xiàn)modal的關(guān)鍵
// ==============
$(document).on('click.bs.modal.data-api', '[data-toggle="modal"]', function (e) {//點(diǎn)擊按鈕的時(shí)候觸發(fā)模態(tài)框的東西，
var $this = $(this)
var href = $this.attr('href')
var $target = $($this.attr('data-target') || (href && href.replace(/.*(?=#[^\s]+$)/, ''))) // strip for ie7
var option = $target.data('bs.modal') ? 'toggle' : $.extend({ remote: !/#/.test(href) && href }, $target.data(), $this.data())//這地方是區(qū)別一下第一次觸發(fā)和第二次觸發(fā)
//到這里為止是為了得到被控制的modal的dom元素
if ($this.is('a')) e.preventDefault()
$target.one('show.bs.modal', function (showEvent) {//調(diào)用show方法后立即執(zhí)行的事件
if (showEvent.isDefaultPrevented()) return // only register focus restorer if modal will actually get shown
$target.one('hidden.bs.modal', function () {//調(diào)用show后創(chuàng)建的事件，模態(tài)框隱藏后觸發(fā)，
$this.is(':visible') && $this.trigger('focus')//如果原來(lái)的按鈕還存在的（或顯示的）話，那就讓他得到焦點(diǎn)
})
})
Plugin.call($target, option, this)
})
}(jQuery);
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- 頁(yè)面遮罩層，并且阻止頁(yè)面body滾動(dòng)。bootstrap模態(tài)框原理
- 使用jQuery和Bootstrap實(shí)現(xiàn)多層、自適應(yīng)模態(tài)窗口
- Bootstrap每天必學(xué)之模態(tài)框（Modal）插件
- BOOTSTRAP時(shí)間控件顯示在模態(tài)框下面的bug修復(fù)
- Bootstrap模態(tài)框(modal)垂直居中的實(shí)例代碼
- 淺析BootStrap模態(tài)框的使用(經(jīng)典)
- Bootstrap模態(tài)框調(diào)用功能實(shí)現(xiàn)方法
- Bootstrap模態(tài)對(duì)話框的簡(jiǎn)單使用
- bootstrap模態(tài)框消失問(wèn)題的解決方法
- Bootstrap模態(tài)框禁用空白處點(diǎn)擊關(guān)閉
相關(guān)文章
JS實(shí)現(xiàn)的用來(lái)對(duì)比兩個(gè)用指定分隔符分割的字符串是否相同
這篇文章主要介紹了JS實(shí)現(xiàn)的用來(lái)對(duì)比兩個(gè)用指定分隔符分割的字符串是否相同,本文代碼為特殊需要而寫(xiě),需要的朋友可以參考下2014-09-09
基于JS實(shí)現(xiàn)PHP的sprintf函數(shù)實(shí)例
這篇文章主要介紹了基于JS實(shí)現(xiàn)PHP的sprintf函數(shù)的方法,可實(shí)現(xiàn)JavaScript模擬PHPsprintf函數(shù)的輸出功能,涉及JavaScript字符串操作的相關(guān)技巧,需要的朋友可以參考下2015-11-11
JS集成fckeditor及判斷內(nèi)容是否為空的方法
這篇文章主要介紹了JS集成fckeditor及判斷內(nèi)容是否為空的方法,涉及fckeditor的設(shè)置及頁(yè)面元素的操作技巧,并分析了php環(huán)境下配置文件上傳的注意事項(xiàng),需要的朋友可以參考下2016-05-05
javascript性能優(yōu)化之事件委托實(shí)例詳解
這篇文章主要介紹了javascript性能優(yōu)化之事件委托用法,結(jié)合實(shí)例形式對(duì)比分析了JavaScript中事件委托的具體用法與優(yōu)點(diǎn),需要的朋友可以參考下2015-12-12
js和css寫(xiě)一個(gè)可以自動(dòng)隱藏的懸浮框
用js和css寫(xiě)一個(gè)可以自動(dòng)隱藏的懸浮框。css肯定是用來(lái)控制樣式的，js用來(lái)控制器顯示與隱藏的,需要的朋友可以參考下2014-03-03
這篇文章主要介紹了javascript去除空格方法,實(shí)例總結(jié)了javascript去除字符串空格的常用技巧,需要的朋友可以參考下2015-05-05
js 右鍵菜單，支持不同對(duì)象不同菜單(兼容IE、Firefox)
版本雖然很老也不符合標(biāo)準(zhǔn)了，不過(guò)代碼是值得參考的，需要右鍵菜單的朋友可以參考下。2010-01-01
Js實(shí)現(xiàn)簡(jiǎn)單的小球運(yùn)動(dòng)特效
這篇文章主要介紹了Js實(shí)現(xiàn)簡(jiǎn)單的小球運(yùn)動(dòng)特效的相關(guān)資料,需要的朋友可以參考下2016-02-02
移動(dòng)web開(kāi)發(fā)之touch事件實(shí)例詳解
下面小編就為大家分享一篇移動(dòng)web開(kāi)發(fā)之touch事件實(shí)例詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-01-01
批量設(shè)置樣式的三種方法:第一種使用JSON/第二種使用cssText/使用第三種with(不推薦使用),感興趣的朋友可以參考下，希望可以幫助到你2013-02-02