先从bootstrap.modal.js
的结构看起。
function($){
var Modal = function(){} //构造器
Modal.prototype = function(){} //构造器的原型
function ..(){} //自定义方法
$.fn.modal = function(){} //在jQuery对象上自定方法
$.fn.modal.defaults = {} //设置默认属性
$.fn.modal.Constructor = Modal //重置构造器名
$(function(){}) //初始化
}(window.jQuery)
其HTML结构
<a class="btn" data-toggle="modal" href="#myModal" >点击触发对话框</a>
<div class="modal" id="myModal">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>对话框标题</h3>
</div>
<div class="modal-body">
<p>对话框内容</p>
</div>
<div class="modal-footer">
<a href="#" class="btn" data-dismiss="modal">关闭</a>
<a href="#" class="btn btn-primary" data-dismiss="modal">保存更新</a>
</div>
</div>
我们开始过一遍插件源码:从初始化开始
$(function () {
/*
* 在所有有data-toggle='modal'属性的标签上帮上click事件,一般为a标签
* /.*(?=#[^\s]+$)/表示如果匹配成功将#之前的信息删除
* 对于jQuery对象,比如a标签有data-xx类型的,在其data方法中都可以显示
* 将a标签data-target指向的或是href的锚点指向的元素传入modal方法里
* */
$('body').on('click.modal.data-api', '[data-toggle="modal"]', function ( e ) {
var $this = $(this), href
, $target = $($this.attr('data-target') || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '')) //strip for ie7
, option = $target.data('modal') ? 'toggle' : $.extend({}, $target.data(), $this.data());
e.preventDefault()
$target.modal(option)
})
})
根据HTML
提供的结构,$target
为a
标签所指向的弹出框div
的Jquery
对象。另外$this.data()
存在数据,为{toggle:'modal'}
,这个我在注释中已经解释。最后执行$target.modal(option)
,我们进入jQuery对象的这个方法。
$.fn.modal = function ( option ) {
return this.each(function () {
var $this = $(this)
, data = $this.data('modal')
, options = $.extend({}, $.fn.modal.defaults, $this.data(), typeof option == 'object' && option)
if (!data) $this.data('modal', (data = new Modal(this, options)))//为modal绑定对象
if (typeof option == 'string') data[option]()
else if (options.show) data.show()
})
}
初始化一些参数,在弹出框div
上加入了一个modal
属性,如果这个modal
属性不存在,则实例化Modal
构造器。最后执行show
方法,因为此时你已经点击了a
标签,让div
显示。代码中有if(typeof option == 'string')data[option]
,表示代码支持传入方法名,执行该方法,在执行show
方法之前,我们先进入Modal
的构造器中看看。
/*
* 构造器,为所有data-dismiss='modal'属性的标签绑定原型上的hide方法
* */
var Modal = function ( content, options ) {
this.options = options
this.$element = $(content)
.delegate('[data-dismiss="modal"]', 'click.dismiss.modal', $.proxy(this.hide, this))
}
很简单,让带有data-dismiss='modal'
属性的标签的click
事件交给弹出框div
代理,注意这里的执行的方法。这里为什么要$.proxy(this.hide,this)
这样写,第一,需要明白此时的this
表示着构造器的实例,代理的事件需要使用到实例的hide
方法,为什么实例拥有hide
方法,很简单this
是Modal
的实例,它继承了Modal
原型的方法。那proxy
方法中的第二个this
,则表示着这个hide
方法的调用者,即上下文,可以试想一下,如果我们不修改这个,那执行这个方法时,其里面的this
是不是指向了调用它的a
标签呢?(注意留意HTML
结构,拥有data-dismiss
属性的三个a
标签,其实分别就是弹出框的关闭按钮等),那原来定义在原型上的hide
方法中的this
的属性将不能在正常使用。
综上,实例化,主要就是给弹出框绑定了hide
事件,为将来关闭弹出框,做准备。
好,回到之前JQuery的modal
方法上,最后我们执行了show
方法,进入show
方法。
下面是执行的流程图,就是各个方法的执行顺序
show -> escape -> backdrop
hide ->escape -> hideModal -> backdrop
show
, show: function () {
var that = this
if (this.isShown) return
$('body').addClass('modal-open')//给body加上modal-open类
this.isShown = true//将isShown属性设置成true
this.$element.trigger('show');//没理解
escape.call(this)//加上键盘事件
backdrop.call(this, function () {
var transition = $.support.transition && that.$element.hasClass('fade')
//console.log(that.$element);
/*
* 插入弹出层
* */
!that.$element.parent().length && that.$element.appendTo(document.body) //don't move modals dom position
that.$element
.show()//jQuery方法显示
if (transition) {
that.$element[0].offsetWidth // force reflow
}
that.$element.addClass('in')
transition ?
that.$element.one($.support.transition.end, function () { that.$element.trigger('shown') }) :
that.$element.trigger('shown')
})
}
谈到show
和hide
的时候,我们需要留意它们源码中的一些我们认为的’废’操作,其实它能帮助我们实现扩展。比如给body
加modal-open
这个类,如果你要在打开弹出层,执行其他程序,可以通过判断这个类来实现,这是bootstrap
它自身已经提供的标识。escape()
方法是一个添加键盘事件和删除键盘事件的方法,它可以让你按enter
键也能关闭弹出框,比较简单。
接下来我们进入backdrop
方法
/*
* 生成遮罩层,并且控制遮罩层的显示或删除
* */
function backdrop( callback ) {
var that = this
, animate = this.$element.hasClass('fade') ? 'fade' : ''
if (this.isShown && this.options.backdrop) {
var doAnimate = $.support.transition && animate
//console.log(doAnimate);
this.$backdrop = $('<div class="modal-backdrop ' + animate + '" />')
.appendTo(document.body)//遮罩层,让弹出框显示时,背景被遮罩,此时为透明的
if (this.options.backdrop != 'static') {
this.$backdrop.click($.proxy(this.hide, this))
}
if (doAnimate) this.$backdrop[0].offsetWidth // force reflow
this.$backdrop.addClass('in')//加入in类,显示遮罩层
doAnimate ?
this.$backdrop.one($.support.transition.end, callback) :
callback()
//打开时,执行callback()回调
} else if (!this.isShown && this.$backdrop) {
this.$backdrop.removeClass('in')//删除in,遮罩层透明
$.support.transition && this.$element.hasClass('fade')?
this.$backdrop.one($.support.transition.end, $.proxy(removeBackdrop, this)) :
removeBackdrop.call(this)
//一般执行removeBackdrop()函数
} else if (callback) {
callback()
}
}
这里为什么要判断弹出框是否有fade
类,在bootstrap.css
中,.fade
拥有left:-25%
的属性,当.fade .in
时则left
变为10%
,在版本较高的浏览器中,有自上向下的移动的效果(低版本浏览器没有效果,不过这个可以jQuery实现…),这个部分需要我们结合css
样式看,注意in的样式,就可以了,弹出框显示的最后一步,执行callback
回调,显示弹出框,并给弹出框加上in
类,80%
透明度。最后完成显示。
之前因为我们已经在弹出框的三个a
标签上都绑定了hide
事件,所以当我们点击关闭时,执行hide
方法
hide: function ( e ) {
e && e.preventDefault()
if (!this.isShown) return
var that = this
this.isShown = false
$('body').removeClass('modal-open')
escape.call(this)//关闭按键事件
this.$element
.trigger('hide')
.removeClass('in')//jQuery方法,将弹出框隐藏,并将div的class去in
$.support.transition && this.$element.hasClass('fade') ?
hideWithTransition.call(this) :
hideModal.call(this)
}
其实跟show
方法差不多,主要是给show
擦屁股,进入hideModal
方法
function hideModal( that ) {
this.$element
.hide() //删除效果更好
.trigger('hidden')
backdrop.call(this)
}
蛮蛋疼的方法,还是调用backdrop
。最后删除时我们调用的是removeBackdrop
方法。
/*
* 清除遮罩层
* */
function removeBackdrop() {
this.$backdrop.remove()
this.$backdrop = null
}
将之前创建的遮罩层删除。以上完成一遍弹出框的打开显示。
内容不多,时间刚好,以上是我的一点读码体会,如有错误,请指出,大家共通学习。