MyApp.Overlay = MyApp.Overlay || {
    create: function () {
            
        $(window).bind("resize.dialog-overlay", MyApp.Overlay.resize)
        var c = $("<div></div>").addClass("ui-widget-overlay").appendTo(document.body).css({
            width: MyApp.Window.width(),
            height: MyApp.Window.height()
        });
        return c
    },
    destroy: function () {
        $([document, window]).unbind(".dialog-overlay")
        $(".ui-widget-overlay").remove();
    },
    resize: function () {
        var c = $(".ui-widget-overlay");
        c.css({
            width: 0,
            height: 0
        }).css({
            width: MyApp.Window.width(),
            height: MyApp.Window.height()
        })
    }
};

MyApp.Window = MyApp.Window || {

    height: function () {
        var d, c;
        if ($.browser.msie && $.browser.version < 7) {
            d = Math.max(document.documentElement.scrollHeight, document.body.scrollHeight);
            c = Math.max(document.documentElement.offsetHeight, document.body.offsetHeight);
            if (d < c) {
                return $(window).height() + "px"
            } else {
                return d + "px"
            }
        } else {
            return $(document).height() + "px"
        }
    },
    width: function () {
        var c, d;
        if ($.browser.msie && $.browser.version < 7) {
            c = Math.max(document.documentElement.scrollWidth, document.body.scrollWidth);
            d = Math.max(document.documentElement.offsetWidth, document.body.offsetWidth);
            if (c < d) {
                return $(window).width() + "px"
            } else {
                return c + "px"
            }
        } else {
            return $(document).width() + "px"
        }
    }
     
}

MyApp.Overlay = MyApp.Overlay || {
    instances: [],
    oldInstances: [],
    maxZ: 0,
    create: function () {
            $(window).bind("resize.dialog-overlay", MyApp.Overlay.resize)
        var c = $("<div></div>").addClass("ui-widget-overlay").appendTo(document.body).css({
            width: MyApp.Window.width(),
            height: MyApp.Window.height()
        });
        return c
    },
    destroy: function () {
        $([document, window]).unbind(".dialog-overlay")
        $(".ui-widget-overlay").remove();
    },
    resize: function () {
        var c = $([]);
        $.each(MyApp.Overlay.instances, function () {
            c = c.add(this)
        });
        c.css({
            width: 0,
            height: 0
        }).css({
            width: MyApp.Window.width(),
            height: MyApp.Window.height()
        })
    }
};

MyApp.Window = MyApp.Window || {

    height: function () {
        var d, c;
        if ($.browser.msie && $.browser.version < 7) {
            d = Math.max(document.documentElement.scrollHeight, document.body.scrollHeight);
            c = Math.max(document.documentElement.offsetHeight, document.body.offsetHeight);
            if (d < c) {
                return $(window).height() + "px"
            } else {
                return d + "px"
            }
        } else {
            return $(document).height() + "px"
        }
    },
    width: function () {
        var c, d;
        if ($.browser.msie && $.browser.version < 7) {
            c = Math.max(document.documentElement.scrollWidth, document.body.scrollWidth);
            d = Math.max(document.documentElement.offsetWidth, document.body.offsetWidth);
            if (c < d) {
                return $(window).width() + "px"
            } else {
                return c + "px"
            }
        } else {
            return $(document).width() + "px"
        }
    }
     
}

We use our own dialog code, but the jQuery method of creating an overlay works well, so this is taken from the jQuery UI code and simplified.

jQuery Modal Overlay removed from the Dialog

jquery

JavaScript