遮罩框

mask.css

.mask {
    position: absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    z-index: 2;
    background:#000; 
    opacity:0.5;
}

mask.js

/**
 * Mask lib
 * @require jQuery
 */

function Mask(options){
    options = $.extend({
        'class': 'mask',
        'appendTo': document.body
    }, options);

    this.$el = $('<div/>', {
        class: options.class
    }).appendTo(options.appendTo);
        
    Mask._masks.push(this.$el);
}
Mask._masks = [];

Mask.create = function(options){
    new Mask(options);
}
Mask.close = function(count){
    while(count--){
        Mask._masks.pop().remove();
    }
}

mask2.js

/**
 * Mask2 lib 
 * Based on jQuery
 *
 * reuse one dom
 */

(function(){
var $el = null,
    counter = 0;

function Mask(options){ // 直接使用new就不支持复用，TODO：在new的使用法时也支持复用
    options = $.extend({
        'class': 'mask',
        'appendTo': document.body
    }, options);

    $el = $('<div/>', { class: options.class }).appendTo(options.appendTo));
}

Mask.create = function(options){
    if(!$el) new Mask(options);
    $el.show();
    counter++;
}
Mask.close = function(count){
    count ? counter-- : counter-count;
    if(counter == 0) { $el.hide(); }
}

})();