您的位置:首页 > Web前端 > JQuery

如何让一个方块上下左右居中

2015-09-24 02:20 531 查看
//构造函数
;(function($, window, document,undefined){
var MaskLayer = function(ele, opt){
this.$element = ele,
this.defaults = {
width:'500px',
height:"500px",
backgroundColor:"#00baff",
display:"block"
},
this.options = $.extend({}, this.defaults, opt)
};
//方法
MaskLayer.prototype = {
mask: function() {
var _left,_top,_newWidth,_newHeight;
if($('div').is('.big-mask')){
$(".big-mask").css({display:"block"})
}else{
$("body").append("<div class='big-mask'></div>");
$(".big-mask").css({
position:"fixed" ,
width:"100%",
height:"100%",
top:0,
left:0,
backgroundColor:"#000",
opacity: "0.5",
filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=50)",
zIndex: "99999"
});
}
console.log(this.$element);
this.$element.css({
backgroundColor:this.options.backgroundColor,
width:this.options.width,
height:this.options.height,
display:this.options.display,
zIndex: "999999",
position:"fixed"
});
_left =  parseInt($(window).width()/2);
_top =  parseInt($(window).height()/2);
_newWidth =_left-parseInt(this.options.width)/2;
_newHeight =_top-parseInt(this.options.height)/2;

return this.$element.css({
'left': _newWidth,
'top':_newHeight
});
},
removeMask:function(){
this.$element.css({display:"none"});
$(".big-mask").css({display:"none"});
}
};
//myMaskLayer对象使用
$.fn.createMaskLayer = function(options) {
var masklayer = new MaskLayer(this, options);
return masklayer.mask();
}

$.fn.maskRemove = function(options) {
var masklayer = new MaskLayer(this, options);
return masklayer.removeMask();
}

})(jQuery, window, document);

//调用方法

$(".aaa").createMaskLayer({
backgroundColor:"#fff",
width:"300px",
height:"300px"
});

$(".aaa").maskRemove();


 
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  jquery