简单的jQuery遮罩弹窗效果

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

相信有很多人都会用的遮罩弹窗效果,而且jQuery也有很多相关的插件,之前我们的项目也是用的Thickbox插件,但是产生很多冗余,于是我就尝试自己写了一个插件,若还有其他bug,请以评论形式及时反馈~

jQuery封装代码:

(function($){
/*******************************
* @name 遮罩弹窗封装 v1.0
* @author norion
* @author blog http://zkeyword.com/
* @create 2012.05.23
* @update 2012.05.24
* @可自由转载及使用,但请注明版权归属
*******************************/
$.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 + jQuery(document).scrollTop();
//由于ie6不支持position:fixed
function wrapTop(){
if ( jQuery.browser.msie && ( jQuery.browser.version == "6.0" ) && !jQuery.support.style && jQuery('#maskWrap').length !=0 ){
jQuery('#maskWrap').css({position:'absolute'});
jQuery(window).scroll(function(){
var _wrapTop  = (jQuery(window).height() - _height)/2 + jQuery(this).scrollTop();
jQuery('#maskWrap').css({top:_wrapTop+'px',position:'absolute'})
});
}
}
//防止对象不存在出错
if ( _this.length != 0 ){
maskLayer();
wrapTop();
function maskLayer(){
//判断对象是否存在,进行相对应的操作
if( jQuery("#maskLayer").length == 0 ){
jQuery("body").append('<div id="maskLayer" style="display:none;z-index:99;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:100;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();
});
}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);

jQuery调用代码:

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

标签:

上一篇: 单独一个img标签实现水平居中

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

相关文章

评论

  1. 1
    四月 17, 2013 16:03:16 #1

    ❓ 要测试的话,至少得有相应的css文件及images,对不?

    @回复
    • norion
      四月 27, 2013 13:24:13

      🙁 本来我是想弄直接就能点击出来的demo 但是没时间弄 😥

      @回复

发表评论

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