How to fade background and show a dialog box
There's a nice trick we do at Pageflakes whenever we show a
dialog box. We make the background faded so that user's attention
is dragged to the dialog box and user does not get confused what to
do. Here's how it looks:
Here's how it works:
- First we create an absolute DIV which is semi-transparent
- Above that DIV, we create another absolutely positioned DIV
which contains the dialog box
We also need to make sure user cannot click on anything else
outside the DIV area. We do this by eliminating all mouse events on
the semi-transparent DIV.
Here's the DIV code:
<div id="blockUI"
class="translucent" style='display: none; background-color: gray;
width: 100%;
height: 100%; position: absolute; left: 0px; top: 0px; z-index:
50000;"
onclick="return
false" onmousedown="return false" onmousemove="return false"
onmouseup="return
false" ondblclick="return false">
</div>
The translucent class is like this:
.translucent
{
filter:alpha(opacity=50);
-moz-opacity:0.5;
opacity:0.5;
}
Update: There was a problem in the translucent class for
which it was not working in FF and OP. It's fixed.