插件封装

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

            _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();

转载于:https://www.cnblogs.com/yanjialin/p/4813396.html