你的位置:首页 > Java教程

[Java教程]如何让一个方块上下左右居中


//构造函数
;(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();