JqueryTools overlay position based on window size

问题

I'm using JqueryTools overlay, running into a frustrating issue where the overlay only positions itself from the screen viewport instead of the HTML top edge. I haven't found any solutions so far. Can someone shed some light on to achieve this? Others are having the same issue. Are there alternatives to overlays? The reason I picked Jquery tools, I can use any background image and customize bunch of different things.

Here is the same issues listed on Jquery overlay forum.

"The problem seems to be that it positions itself relative to the screen viewport rather than the HTML page." - http://flowplayer.org/tools/forum/40/47781#post-47781

Any help/suggestion would be appreciated.

回答1:

I came looking for an answer to this, but the JQuery Tools forums seem to be down. This is how I solved it:

    $(window).resize(function() {
        var top = ($(window).height() / 2) - ($("#overlay").outerHeight() / 2);
        var left = ($(window).width() / 2) - ($("#overlay").outerWidth() / 2);
        $("#overlay").css("top", top);
        $("#overlay").css("left", left);
    });