div popup - background mask

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View

i am interested in duplicating a feature ive seen on Netflix -- one by
which a faux-popup (div-based popup) becomes visible, and the
background is masked in a translucent gray.

i am about to start delving into this, but i wanted to see if anyone
had the general technique down already.

...im trying to analyze their site, but its muddy. my guess is its two
w/ two divs -- 1) the mask layer, which is 100% WxH, w/ the semi-opaque
gray. 2) the "popup" div, which is z-indexed on top of #1, w/ no mask.


Re: div popup - background mask

i did this. my approach was to have two divs:

1) the background mask, height & width set to 10)%. background-color of
black and using an IE filter to reduce its opacity to 15% (my app is
IE-only intranet)

2) the popup/dialog window, centered, which looks like a post-it note
w/ a slight fuzzy dropshadow. it has a higher z-index than the mask
div, so it is 100% opacity, which makes it the central focal point.

the dialog div also has an "X" in its top-right corner, for closing the
dialog and canceling the mask layer.



Site Timeline