Gray out page with pop-up

[Quaint]

Hello,

I created a technology test that I launched alongside with my new weblog, which you can read about here: http://quainttech.blogspot.com/.

The blog might not be of great interest, but the technology definitely is. Basically it's a simple implementation of a Web 2.0 technique that grays-out the entire page, so that the users attention shifts to a pop-up. Go look if you don't know what I'm talking about here

By the way, is there a name for this technique? Or can you think of any better name than 'Gray out page with pop-up' :P ?

[Raffles]

The technique was popularised (and invented, I think) by Lightbox JS so I think people tend to refer to them as 'lightboxes'. Other popular ones are Thickbox and Lightbox Gone Wild.

Some other websites have started using their own versions, such as deviantART and British Airways. All they have in common is the half-opaque black box covering everything and a box with something in the middle. It looks very cool and can be useful, but technology-wise it's not that amazing - it's just creating and showing and hiding HTML elements with javascript, which people have been doing for years. Also, things like Lightbox and Thickbox rely on javascript libraries (prototype and jQuery respectively) which can add non-insignificant bloat to your page.

I can see a problem with yours. The first time I clicked on the link, the half-opaque overlay appeared after the box with the content did. Subsequent clicks made them both appear at exactly the same time.

Also, everyone else creates the HTML elements necessary for it with javascript. In your case the overlay and box in the middle are cluttering up the source when "view source" is chosen in the browser.
Also, you're using the inline "onclick", while the other scripts are unobtrusive and attach the event to an anchor based on a class or rel attribute.

[wysiwyg]

The problem with the 100% height is that if you have a screen which is smaller than the content, you can scroll down and when you scroll, the grey box doesn't cover the entire page.

[Raffles]

You can't use CSS to make that grey box reliably the right size. It's possible if you use position:fixed and top:0 bottom:0 left:0 right:0 for it because it's relative to the viewport, so if the body has margins it still will fill up the whole page. Still, this brings up the problem with IE6 and for this you'll have to use document.body.clientHeight to work out how high to make it.

Then there's also the problem of the user scrolling and the box disappearing. Again, you can use position:fixed and change the top: style property onscroll to make up for IE6's deficiencies.

[MikeFoster]

Here's another one Page Grey

[Quaint]

I definitely didn't suspect that this version would be flawless, and like I've said before it's tested with MSIE7 and Firefox 2.x and it worked fine on both (actually even with resizing the screen, etc). My old version automatically resized the gray overlay when the clients screen dimensions changed, but this seemed to work fine as well..

Anyway, this was just a bit of a test project for me.. Learned a lot from it, got enthusiastic and decided to share my findings.. If it is any good to any one (the escape button feature is nice :P) it's free for use, otherwise it'll just be standing there :P

[Raffles]

Well, all the advantages you mention about yours are also things that the others offer. Still, I can certainly understand why you'd be proud of what you've done, I'd be too.

[Quaint]

Haha thanks