Bootstrap模态窗口源码解析模态窗口源码解析
主要为大家详细解析了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 () {//遮罩层:真的是一个压轴函数,,,, 这个回调函数是遮罩完毕后运行的函数