jQuery“遮罩弹窗封装 v1.0”的改进

作者:norion时间:2012年5月28日评论次数:0 条

前几天封装的“遮罩弹窗封装 v1.0”发现在FF下使用调用不到到maskLayer()函数,可能执行顺序的问题,在今天,我做了个小改动加入了用esc关闭的方式,若还有其他bug,请以评论形式及时反馈~

jQuery插件代码:

(function($){
/*******************************
* @name 遮罩弹窗封装 v1.1
* @author norion
* @author blog http://zkeyword.com/
* @create 2012.05.23
* @update 2012.05.28
*******************************/
$.fn.maskLayer = function(maskSet){
maskSet = $.extend({
warpHeight:500, //number类型,窗口的高度
warpWidth:500, //number类型,窗口的宽度
warpUrl:null //string类型,窗口调用的地址
},maskSet);
var _this = this;
var _height = maskSet.warpHeight;
var _width = maskSet.warpWidth;
var _url = maskSet.warpUrl;
var _wrapLeft = (jQuery("body").width() - _width)/2;
var _wrapTop = (jQuery(window).height() - _height)/2;
//由于ie6不支持position:fixed由此函数
function wrapTop(){
if ( jQuery.browser.msie && ( jQuery.browser.version == "6.0" ) && !jQuery.support.style && jQuery('#maskWrap').length !=0 ){
var _wrapTop = (jQuery(window).height() - _height)/2 + jQuery(document).scrollTop();
jQuery('#maskWrap').css({top:_wrapTop+'px',position:'absolute'});
jQuery(window).scroll(function(){
var _wrapTop = (jQuery(window).height() - _height)/2 + jQuery(this).scrollTop();
jQuery('#maskWrap').css({top:_wrapTop+'px',position:'absolute'})
});
}
}
function maskLayer(){
//判断对象是否存在,进行相对应的操作
if( jQuery("#maskLayer").length == 0 ){
jQuery("body").append('<div id="maskLayer" style="display:none;z-index:999;left:0;position:absolute;top: 0;filter:alpha(opacity=30);background:#000;moz-opacity:0.3;opacity:.30"></div><div id="maskWrap_bg"><div id="maskWrap" style="z-index:1000;left:'+_wrapLeft+'px;position:fixed;background:#fff;height:'+_height+'px;top:'+_wrapTop+'px;width:'+_width+'px"></div><span id="maskClose"></span></div>');
var _mask = jQuery('#maskLayer');
var _wrap = jQuery('#maskWrap');
var _close = jQuery('#maskClose');
jQuery("#maskLayer").css({ "width":document.body.scrollWidth+"px","height":jQuery(document).height() })
if ( _url != null ){
_wrap.append('<iframe frameborder="0" style="width:'+_width+'px;height:'+_height+'px;" name="maskWrapiframe" id="maskWrapiframe" src="'+_url+'" hspace="0"></iframe>');
}
_mask.show().live('click',function(){
_mask.hide();
_wrap.hide();
});
_close.live('click',function() {
_mask.hide();
_wrap.hide();
});
jQuery(document).keyup(function(event){
if(event.keyCode == 27){
_mask.hide();
_wrap.hide();
}
});
}else{
var _mask = jQuery('#maskLayer');
var _wrap = jQuery('#maskWrap');
var _close = jQuery('#maskClose');
_wrap.show();
_mask.show().live('click',function(){
_mask.hide();
_wrap.hide();
});
_close.live('click',function() {
_mask.hide();
_wrap.hide();
});
jQuery(document).keyup(function(event){
if(event.keyCode == 27){
_mask.hide();
_wrap.hide();
}
});
}
}
//防止对象不存在出错
if ( _this.length != 0 ){
//载入相关的函数
maskLayer();
wrapTop();
}
}
})(jQuery);

jQuery调用代码:

jQuery('#btn').maskLayer({
	warpHeight:445,
	warpWidth:990,
	warpUrl:'/passport/login_frame.php'
});

标签:

上一篇: 改善jquery返回顶部功能

下一篇:jQuery向上滚动的幻灯片的封装

相关文章

评论

发表评论

电子邮件地址不会被公开。 必填项已用*标注