background semitransparent div

Question

I want to show some dialog (absolute positioned div), and I want to show it above semitransparent 100% div, so everything on background will be dimmed. I have managed it by

<div class='transpBox'></div>

.transparentBox
{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: #white;
    opacity: 0.9;
    z-index: 499;
}

This is all right, but when dialog height is more than browser height and you scroll down, you see that transparent div is not in full screen. What is proper way to make such thing?

Answer 1

Instead of position: absolute, use position: fixed. (Use it with your dialog div too.)

absolute positions based on the page, fixed positions based on the window.

Answer 2

maybe you should try jquery modal dialogs. Rather than creating your own process in doing it. DOing so will give you the semitransparent background and a dialog foreground.