大佬教程收集整理的这篇文章主要介绍了Bootstrap模态窗口源码解析,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
300来行的代码,其中有很多jquery的高级用法,建议,从github上下载一下源码,然后把本篇的代码复制过去,然后,边运行,边阅读,如果有不明白的地方,可以给我留言,我给解答。
// 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))
}
}
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)//否则直接进行
})
}
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()
}
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
@H_590_0@modal.prototype.handleupdate = function () {this.$element.css({
paddingLeft: !this.bodyIsOverflowing && modalIsOverflowing ? this.scrollbarWidth : '',paddingRight: this.bodyIsOverflowing && !modalIsOverflowing ? this.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);
以上是大佬教程为你收集整理的Bootstrap模态窗口源码解析全部内容,希望文章能够帮你解决Bootstrap模态窗口源码解析所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。