如何在具有透明度的模态窗口区域内模糊底层背景图像?

时间:2010-12-15 09:41:31

标签: javascript jquery css modal-dialog

我已经将具有透明度的模态窗口添加到网站中,并且我想将高斯模糊应用于窗口背景,就像Windows vista的航空玻璃效果一样。我可以这样做吗?而且,怎么样?

谢谢! 威廉

2 个答案:

答案 0 :(得分:1)

看看

  1. Windows Aero
  2. Aero Lightbox

答案 1 :(得分:1)

动态宽度/高度Flash小部件如何加载图像,模糊过滤它,并在z-index图层中相当精确地设置包含元素,在模式底层之上和模态内容之下。或者,http://plugins.jquery.com/project/blurimagehttp://www.nihilogic.dk/labs/imagefx/也看起来很有希望。

编辑:回应您的“部分图片模糊评论”

使用Flash小部件和定位,是的 - 离开我的头顶你可以尝试全尺寸的双层swf,底层包含图像资产,就像它上面的层一样,这个顶层将是完全模糊 - 顶层也被遮盖。将掩码大小调整到您打开的面板(如果需要,设置一些onresize处理程序等)。如果您的面板是可拖动的,则跟踪HTML面板的位置与Flash中面板大小的第二层的位置,最终围绕蒙版移动以仅显示看起来像单个图像的模糊区域。

另请注意,为了提高效率,您需要ExternalInterface,所以分钟。 Flash Player 8,击败http://www.nihilogic.dk/labs/imagefx/列出的稀疏浏览器实现。

另一件事情让人想起,可能只需要两个<div>元素,两个元素都包含与上面相同的图像,如上所述彼此叠加,你可以操纵CSS clip properties关系到不透明面板的大小/位置。如果它是YUI Panel,你可以在我上面的Flash示例中使用模态底层图层作为你的“底层”,并且Panel本身被包装,所以你可以在那里使用CSS剪辑和JS模糊,甚至可能background-position:fixed和JS模糊可能会有所帮助......如果你设法尝试任何尝试,我会很想看到你的一些尝试 - 希望我有空闲时间!