Javascript:对网页的调光效果

时间:2011-12-23 23:02:23

标签: javascript effects

当有人告诉我当你访问网页时调用“调光效果”是什么,并且整个页面变得“暗淡”或“模糊”并且屏幕中间有图像或表格? 要查看网页的其余部分,您必须关闭屏幕中间的图像或表单。

是否有一些用于设置它的软件?

我所知道的是这是一个使用JS的调光效果,因为我在一些图片库上看过它但现在我在网页上看到的越来越多(例如当他们要求你登录并显示效果时登录表格。)

我们非常感谢任何链接,代码或建议形式的帮助。

谢谢!

4 个答案:

答案 0 :(得分:3)

该效果称为模态对话框。它是通过添加半透明<div>来覆盖页面(例如,使用这些CSS规则:background:blackopacity:50%)创建的,然后使用内容创建另一个<div>想要它。

答案 1 :(得分:1)

它被称为灯箱;有很多库可以在你的页面上放置一个。

其中一些是基于更抽象的库(如jQuery)的插件,因为它易于使用来实现效果和动画(如this plugin)。

答案 2 :(得分:1)

有一些名称灯箱是它的主要名称,或者有些称之为叠加。

查询http://leandrovieira.com/projects/jquery/lightbox/

有一个很好的插件

答案 3 :(得分:1)

有很多方法可以做到这一点。你可以使用灯箱,一些jQuery或自己动手。我通常会自己动手,因为我喜欢在那里注入很多动态的东西,而我似乎并不是从图书馆那里得到的。

我使用的方法是使整个页面变暗(jQuery的淡入淡出,或图像覆盖,或类似),然后在不同的z-index上,我将在变暗的页面上方显示div。然后用适合你的东西填充/定位div。