Bootstrap模态窗口源码解析

前言：
bootstrap的 js插件的源码写的非常好，也算是编写jquery插件的模范写法，本来还想大篇详细的分析一下呢，唉，没时间啊，很早之前看过的源码了，现在贴在了博客上，

300来行的代码，其中有很多jquery的高级用法，建议，从github上下载一下源码，然后把本篇的代码复制过去，然后，边运行，边阅读，如果有不明白的地方，可以给我留言，我给解答。

下面是基本每行都加了注释，供大家参考，具体内容如下

/* ========================================================================
 * 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的构造函数，里面声明了需要用到的变量，随后又设置了一些常量。
 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//忽略遮罩成点击吗，不忽略，即：点击遮罩层退出模态

 if (this.options.remote) {//这是远端调用数据的情况，用远端模板来填充模态框
  this.$element
  .find('.modal-content')
  .load(this.options.remote, $.proxy(function () {
   this.$element.trigger('loaded.bs.modal')//触发加载完数据时的监听函数
  }, this))
 }
 }

 modal.version = '3.3.7'

 modal.transition_duration = 300 //transition duration 过度时间
 modal.backdrop_transition_duration = 150  //背景过度时间

 modal.defaults = {//defaults 默认值
 backdrop: true,//有无遮罩层
 keyboard: true,//键盘上的 esc 键被按下时关闭模态框。
 show: true//模态框初始化之后就立即显示出来。
 }
//变量设置完毕，接着就该上函数了。modal的扩展函数有这么几个：
//toggel，show，hide，enforcefocus，escape，resize，hidemodal，removebackdrop，
//backdrop，handleupdate，adjustdialog，resetadjustments，checkscrollbar，setscrollbar，resetscrollbar，
//measurescrollbar终于列完了，恩一共是16个。toggel函数比较简单，是一个显示和隐藏的切换函数。代码如下
 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 })//触发 尾行注册的show.bs.modal事件，并给relatedtarget赋值 $.event 创建事件对象的目的就是可以给他任意赋值

 this.$element.trigger(e)//

 if (this.isshown || e.isdefaultprevented()) return//如果已经显示就返回

 this.isshown = true//标记

 this.checkscrollbar()//核对是否有滚动条，并且测量滚动条宽度（非x轴）
 this.setscrollbar()//如果有滚动条，就给body一个padding-right 是一个滚动条的宽度，这一步的目的是为了呼应，下面的去掉y轴滚动条
 this.$body.addclass('modal-open')//接着为body元素添加modal-open类、即去掉y轴滚动条，页面就会往右一个滚动条的宽度，

 this.escape()//按esc退出模态
 this.resize()//窗口大小调整，窗口大小改变，模态框也跟着变

 this.$element.on('click.dismiss.bs.modal', '[data-dismiss="modal"]', $.proxy(this.hide, this))//注册右上角关闭事件

 this.$dialog.on('mousedown.dismiss.bs.modal', function () {//在dialog中按下鼠标，在父元素中抬起   忽略： 在模态中按下鼠标，在遮罩层中抬起鼠标
  that.$element.one('mouseup.dismiss.bs.modal', function (e) {//在父元素中抬起
  if ($(e.target).is(that.$element)) that.ignorebackdropclick = true
  })
 })

 this.backdrop(function () {//遮罩层：真的是一个压轴函数，，，，   这个回调函数是遮罩完毕后运行的函数
  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()//调整对话框

  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)//模态过度完成后，触发foucus 和shown.bs.modal
   })
   .emulatetransitionend(modal.transition_duration) :
  that.$element.trigger('focus').trigger(e)//否则直接进行
 })
 }

 modal.prototype.hide = function (e) {//他的存在就是一个事件监听函数，所以可以加e 下面是模态窗口关闭处理函数
 if (e) e.preventdefault()//取消默认行为

 e = $.event('hide.bs.modal')//无论什么事件进入这里都换成 'hide.bs.modal' 妈的这样就通用了，，，无论是点击“x”，还是取消，确定，都这么处理，

 this.$element.trigger(e)//处发hide

 if (!this.isshown || e.isdefaultprevented()) return

 this.isshown = false//恢复初始的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))//到了这里，虽然模态已经没有了，但仅仅是把透明度改为0了，this.hidemodal才是真正移除
  .emulatetransitionend(modal.transition_duration) :
  this.hidemodal()
 }

 modal.prototype.enforcefocus = function () {//模态框获得焦点
 $(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 () {//键盘上的 esc 键被按下时关闭模态框。
 if (this.isshown && this.options.keyboard) {//仅在模态窗显示的时候才注册这个事件
  this.$element.on('keydown.dismiss.bs.modal', $.proxy(function (e) {//不仅可以把事件穿过来，。。。牛
  e.which == 27 && this.hide()//27 时调用hide方法（ps：比if省事多了，高手就是高手）
  }, this))
 } else if (!this.isshown) {//否则移除他，感觉怪怪的，不管了
  this.$element.off('keydown.dismiss.bs.modal')
 }
 }

 modal.prototype.resize = function () {//为你window resize注册事件
 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动画类

 if (this.isshown && this.options.backdrop) {//条件：正在show，并且有遮罩层
  var doanimate = $.support.transition && animate// do的条件是支持css3过度和有fade class

  this.$backdrop = $(document.createelement('div'))//创建遮罩层div
  .addclass('modal-backdrop ' + animate)//添加 modal-backdrop 和fade class
  .appendto(this.$body)//加到body底部下面（待定其他版本可能加在模态里面）

  this.$element.on('click.dismiss.bs.modal', $.proxy(function (e) {//点击模态窗口处理事件：
  if (this.ignorebackdropclick) {
   this.ignorebackdropclick = false
   return
  }
  if (e.target !== e.currenttarget) return//如果没有点击模态，则不做处理
  this.options.backdrop == 'static'
   ? this.$element[0].focus()//指定静态的背景下，不关闭模式点击
   : this.hide()//否则 关闭模态
  }, this))

  if (doanimate) this.$backdrop[0].offsetwidth // force reflow  英文翻译 强迫回流，，，先不管

  this.$backdrop.addclass('in')//添加in 0.5的透明度

  if (!callback) return

  doanimate ?
  this.$backdrop
   .one('bstransitionend', callback)
   .emulatetransitionend(modal.backdrop_transition_duration) ://如果有fade动画的话 就给遮罩层绑定一个遮罩过度时间，为什么要这么写以后聊
  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 () {//处理因为滚动条而使模态位置的不和谐问题
 var modalisoverflowing = this.$element[0].scrollheight > document.documentelement.clientheight//模态是否溢出屏幕，即高度大于客户端高度

 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//即是否有滚动条
 this.scrollbarwidth = this.measurescrollbar()
 }

 modal.prototype.setscrollbar = function () {//用来为body元素设置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 测量 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')//如果是第二次打开模态窗口，这个数据才会有
  var options = $.extend({}, modal.defaults, $this.data(), typeof option == 'object' && option)//合并一下默认参数
  //
  if (!data) $this.data('bs.modal', (data = new modal(this, options)))//把modal对象存起来，避免第二次打开时在new对象，这点值得学习
  if (typeof option == 'string') data[option](_relatedtarget)/*这里是区分option是对象和字符串的情况*/
  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代码就实现modal的关键
 // ==============

 $(document).on('click.bs.modal.data-api', '[data-toggle="modal"]', function (e) {//点击按钮的时候触发模态框的东西，
 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())//这地方是区别一下第一次触发和第二次触发
  //到这里为止是为了得到被控制的modal的dom元素
 if ($this.is('a')) e.preventdefault()

 $target.one('show.bs.modal', function (showevent) {//调用show方法后立即执行的事件
  if (showevent.isdefaultprevented()) return // only register focus restorer if modal will actually get shown
  $target.one('hidden.bs.modal', function () {//调用show后创建的事件，模态框隐藏后触发，
  $this.is(':visible') && $this.trigger('focus')//如果原来的按钮还存在的（或显示的）话，那就让他得到焦点
  })
 })
 plugin.call($target, option, this)
 })

}(jquery);

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。