How to blur the underlying background image within the area of a modal window with transparency?
I've added modal window with transparency into a web site, and I'd like to apply such as Gaussian blur to the window background, just like Win开发者_开发百科dows vista's aero glass effect. Is it possible for me to do that? and, how?
Thanks! William
How about a dynamic width/height flash widget which loads the image, blur filters it, and set the containing element fairly precisely in a z-index layer, above the modal underlay and below the modal content. Alternatively, http://plugins.jquery.com/project/blurimage, or http://www.nihilogic.dk/labs/imagefx/ also looks promising.
EDIT: In response to your 'partial image blurring comment'
Using that Flash widget and positioning, yeah - off the top of my head you might try a double-layered swf at full size, the bottom layer contains the image asset, as does the layer above it, this top layer would be fully blurred - and the top layer is also masked. Size the mask to the panel you have open (set up some onresize handlers etc if needed). If your panels are draggable, track the position of your HTML panel versus the position of the panel-sized second layer in Flash, ultimately moving around a mask to reveal only the blurred region of what looks like a single image.
Also note that you'd need ExternalInterface
for this to be efficient, so min. Flash player 8, which beats the sparse browser implementations listed at http://www.nihilogic.dk/labs/imagefx/.
Another thing springs to mind, which might only need two <div>
elements, both containing the same image as above, layered on top of each other as above, and you'd manipulate CSS clip properties in relation to the size/position of your opaque panel. If it were a YUI Panel, you could use the modal underlay layer as your 'bottom layer' in my Flash example above, and the Panel itself is wrapped so you could possibly use CSS clip and JS blur in there, maybe even background-position:fixed
and JS blur could help... I'd be keen to see some of your attempts if you manage to try any - wish I had some spare time!
Take a look
- Windows Aero
- Aero Lightbox
精彩评论