//构造函数;(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();
时间: 2024-11-05 09:43:25