JQuery CSS code doesn't center in the middle of the window

I have this code here

http://forum.castoff.net/menu.php

And the msgbox comes 开发者_C百科up in the middle of the whole page... I need it to come up in the middle of the viewable area..

Could anyone help ??

I am sure its just a CSS issue

Thanks

Lee

All you have to do is on .msgbox, change position: absolute to position: fixed.

That's it.

Read this to understand the different position values:
http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/

You're giving "dim" a top-position of 50%, so it will be at 50% of the page, not the viewable area.

Try centering it with this:

function centerMe(element) {
    //pass element name to be centered on screen
    var pWidth = $(window).width();
    var pTop = $(window).scrollTop()
    var eWidth = $(element).width()
    var height = $(element).height()
    $(element).css('top', pTop + 100+'px')
    $(element).css('left', parseInt((pWidth / 2) - (eWidth / 2)) + 'px')
}

The table and the #dim have height 2000px and over, so giving top:50% for the popup put it in the middle of it's parent. Remove the height of the table and see if this do the job (probably will works, because the height of #dim is the height of the document.).

Another option is to add a fixed value for the distance from top for the .msgbox. For example in your css you can change the .msgbox {top:50%;} to .msgbox {top:200px;}