
代码具体如下:
(function(){
modal = {}
modal.openDialog = function(url, title, width, height, id){}
modal.closeDialog = function(id){}
window.modal = modal
})()
openDialog函数中传入了id,即为即将生成的dialog的div的id,url为dialog中iframe的src,id也将写在modal函数的参数option中。
调用多个dialog时,需要传入不同的id;
源代码中
backdrop: function (callback) {
var that = this
, animate = this.$element.hasClass('fade') ? 'fade' : ''
if (this.isShown &&this.options.backdrop) {
var doAnimate = $.support.transition &&animate
this.$backdrop = $('')
.appendTo(document.body)
this.$backdrop.click(
this.options.backdrop == 'static' ?
$.proxy(this.$element[0].focus, this.$element[0])
: $.proxy(this.hide, this)
)
if (doAnimate) this.$backdrop[0].offsetWidth // force reflow
this.$backdrop.addClass('in')
if (!callback) return
doAnimate ?
this.$backdrop.one($.support.transition.end, callback) :
callback()
} else if (!this.isShown &&this.$backdrop) {
this.$backdrop.removeClass('in')
$.support.transition &&this.$element.hasClass('fade')?
this.$backdrop.one($.support.transition.end, callback) :
callback()
} else if (callback) {
callback()
}
}
函数中 this.$backdrop = $('').appendTo(document.body)即为添加遮罩层。
遮罩层实现为在body后添加,并设置该div的z-Index为99999;
我们接下来的实现也是用z-Index,考虑到一层一层网上叠加z-Index,遮罩层只一个即可,而不同的dialog只需比遮罩层的z-Index高即可。
那就仅第一个dialog打开的时候添加遮罩层,其余时候对遮罩层的style中z-Index进行增大即可。
tabindex 属性规定元素的 tab 键控制次序(当 tab 键用于导航时)。 role是无障碍设计里的标签,是方便障碍人士使用屏幕阅读器使用的。(比如说你的网站设计时没有考虑无障碍应用,可能正常人看着网站没有任何问题,可是盲眼人士使用屏幕阅读器...欢迎分享,转载请注明来源:内存溢出
微信扫一扫
支付宝扫一扫
评论列表(0条)