js抄袭笔记 -- 完美黑屏

好处:
1.考虑了resize
2.考虑了页面宽度不足一屏幕
3.考虑了滚动条

http://james.padolsey.com/page/2/

function documentOverlay() {
    // @version 0.12
    // @author James Padolsey
    // @info http://james.padolsey.com/javascript/the-perfect-document-overlay/
   
    // Shortcut to current instance of object:
    var instance = this,
   
    // Cached body height:
    bodyHeight = (function(){
        return getDocDim('Height','min');   
    })();
   
    // CSS helper function:
    function css(el,o) {
        for (var i in o) { el.style[i] = o[i]; }
        return el;
    };
   
    // Document height/width getter:
    function getDocDim(prop,m){
        m = m || 'max';
        return Math[m](
            Math[m](document.body["scroll" + prop], document.documentElement["scroll" + prop]),
            Math[m](document.body["offset" + prop], document.documentElement["offset" + prop]),
            Math[m](document.body["client" + prop], document.documentElement["client" + prop])
);
    }
   
    // get window height: (viewport):
    function getWinHeight() {
        return window.innerHeight ||
                (document.compatMode == "CSS1Compat" && document.documentElement.clientHeight || document.body.clientHeight);
    }
   
    // Public properties:
   
    // Expose CSS helper, for public usage:
    this.css = function(o){
        css(instance.element, o);
        return instance;
    };
   
    // The default duration is infinity:
    this.duration = null;
   
    // Creates and styles new div element:
    this.element = (function(){
        return css(document.createElement('div'),{
            width: '100%',
            height: getDocDim('Height') + 'px',
            position: 'absolute', zIndex: 999,
            left: 0, top: 0,
        });
    })();
   
    // Resize cover when window is resized:
    window.onresize = function(){
       
        // No need to do anything if document['body'] is taller than viewport
        if(bodyHeight>getWinHeight()) { return; }
       
        // We need to hide it before showing
        // it again, due to scrollbar issue.
        instance.css({display: 'none'});
        setTimeout(function(){
            instance.css({
                height: getDocDim('Height') + 'px',
                display: 'block'
            });
        }, 10);
       
    };
   
    // Remove the element:
    this.remove = function(){
        this.element.parentNode && this.element.parentNode.removeChild(instance.element);
    };
   
    // Show element:
    this.show = function(){};
   
    // Event handling helper:
    this.on = function(what,handler){
        what.toLowerCase() === 'show' ? (instance.show = handler)
        : instance.element['on'+what] = handler;
        return instance;
    };
   
    // Begin:
    this.init = function(duration){
   
        // Overwrite duration if parameter is supplied:
        instance.duration = duration || instance.duration;
       
        // Inject overlay element into DOM:
        document.getElementsByTagName('body')[0].appendChild(instance.element);
       
        // Run show() (by default, an empty function):
        instance.show.call(instance.element,instance);
       
        // If a duration is supplied then remove element after
        // the specified amount of time:
        instance.duration && setTimeout(function(){instance.remove();}, instance.duration);
       
        // Return instance, for reference:
        return instance;
       
    };
   
}
var Mao = (new documentOverlay()).css({
    background: 'black',
    opacity: 0.5,
    filter: 'alpha(opacity=50)'
}).on('dblclick',function(){
    Mao.remove()
}).init();