Random thoughts from an unusual company

Thing-a-Day 3: Faded-out dialog backgrounds

Tim Davis  15 July 2009 08:00:00
This is Day 3 of my week of tips for web development in Domino. I hope some of you find them useful.

Yesterday I talked about making dialogs using a < div >. Today I want to talk about how to do that thing where you darken and disable the rest of the page behind your dialog.

You do this by putting another div behind your dialog and giving it an opacity setting in its styles. The background div stops you clicking on anything else on the page, but the opacity allows the rest of the page to show through.

As usual, IE doesn't support 'opacity', so you have to use the alpha filter instead. This has a value from 0-100 as opposed to 0-1.

You show your 'background' behind your dialog by giving it a z-index lower than your dialog (e.g. 1, with your dialog being 2).

opacity: 0.5;
filter: alpha(opacity = 50);

You show and hide your background div at the same time you show and hide your dialog div.

To darken the background, use black as the background colour. To fade it out, use white.

You will want your background to be the size of the page, so you can use something like document.body.offsetwidth and offsetHeight.

Tomorrow: Handling IE problems.
No Comments Found