https://www.edenfantasys.com/Scripts/libs/PageOverlay.js

1/**
2* Full page semi-transparent overlay for modal pop ups
3* usage: var overlay = new EFPageOverlay();
4*    overlay.shade(); //turn overlay on
5*    overlay.unshade(); //turn overlay off
6*/
7
8var EFPageOverlay = function (options) {
9    var shadeEvent = new EFCustomEvent(),
10        unshadeEvent = new EFCustomEvent(),
11        settings = $.extend({}, EFPageOverlay.config, options || {}),
12        overlayEl = null,
13        ctx = this;
14
15    this.shade = function (target) {
16        var targetEl = target || $(document),
17            targetHeight = targetEl.height(),
18            targetWidth = target ? target.outerWidth() : '100%',
19            overlay = $('<div id="globalOverlay"/>');
20
21        overlayEl = overlay.height(targetHeight).width(targetWidth)
22            .css({
23                'opacity': 0.5,
24                'position': 'absolute',
25                'top': 0,
26                'left': 0,
27                'background-color': '#000',
28                'z-index': 5000
29            }).appendTo('body');
30
31        if (settings.unshadeOnClick) {
32            overlayEl.click(function (e) {
33                e.preventDefault();
34                ctx.unshade();
35            });
36        }
37
38        shadeEvent.fire(overlayEl);
39    };
40
41    this.unshade = function () {
42        overlayEl.remove();
43        unshadeEvent.fire(this);
44    };
45
46    this.onShade = function (callback) {
47        if (callback) {
48            shadeEvent.subscribe(callback);
49        }
50    };
51
52    this.onUnshade = function (callback) {
53        if (callback) {
54            unshadeEvent.subscribe(callback);
55        }
56    };
57};

58
59EFPageOverlay.config = {
60    unshadeOnClick: false,
61    overlayStyle: {
62        'opacity': 0.5,
63        'position': 'absolute',
64        'top': 0,
65        'left': 0,
66        'background-color': '#000',
67        'z-index': 5000
68    }
69};