How to design a CSS for floating confirm dialog centered on the visible portion of a page?

Question

Hi,

I already asked a more general question, with a great answer.

However, I want a more tricky centered floating popup:

If my page is 1000px high, and I'm viewing only the upper portion of it, I do not wish the popup to pop at 500px, but rather at the middle of the visible portion of the screen.

Is there a way to access the visible portion of the page in CSS?

Thanks

Answer 1

you should use CSS (margin: 0 auto;) for horizontal centering and javascript (viewport height) for the vertical one.

check this example: http://www.alistapart.com/d/footers/footer_variation1.html

Answer 2

You could give the floating popup the css...

position: fixed;

Once you go that you can just give it 'top' and 'left' parameters like you would with absolutely positioned elements.

Once it is positioned, no matter where you scroll it will stay where you told it to in relation to the actual browsers window.

The only problem is that fixed positions do not work that well in IE6, instead of positioning on top of everything like it should, elements that have a fixed position tend to just act like static content.