How to put an element on the top layer in the middle of the browser's window?

Question

EDIT: I used Browser's window instead of page or screen so that if the browser is in "window" mode (and not in full screen) it will be centred anyway.

---

I need to write a countdown which will temporally opacize the page and write (possibly in full window size) in the middle of the browser's window "3" one second of pause "2" an other second "1" an other second and the app should start.

The problem is how to put that number there and in that way. So this is a CSS problem not JavaScript, except if there is a JS framework that does this thing easyly :P

To put it in a top layer this should be enough:

position: absolute;
z-index: 1;

supposing I do not have any other element in z >= 1. How to do the rest part?

I think I'll have to create a full window size div with a semitransparent background (any hint on how to do it?) then write the huge number in it. It should obviously work with any resolution.

Answer 1

Across the whole screen -- I hope this is not possible. I don't want anything in my browser to be able to have that much control over other browser tabs let alone the rest of my screen.

Within a browser it certainly is possible... the insert hyperlink dialogue does it.

Answer 2

If you want all custom javascript, have a look at http://blog.madskristensen.dk/post/Custom-LightBox-JavaScript.aspx

Or you can use JQuery Thickbox

Answer 3

I'd try the lightbox / thickbox approaches mathieu recommended. If you want to try doing the CSS on your own ... off the top of my head:

div#countdown{ background: #000; color: #fff; font-size: 30px; height: 100%; line-height: 100%; opacity: .8; width: 100%; }