jQuery生成全页面的悬浮覆盖层效果(overlay)
可能在大家开发的过程中,往往需要自己生成一个全页面的覆盖层,以便让用户能够把注意力专注于开发者指定的某一个区域,在这里开发小技巧里,我们使用非常简单的代码生成类似的效果,如下:
- $("#overlay")
- .height(docHeight)
- .css({
- 'opacity':0.8,
- 'position':'absolute',
- 'top':0,
- 'left':0,
- 'background-color':'#AAAAAA',
- 'width':'100%',
- 'z-index':5000
- });
在以上代码中,我们使用.css方法来生成需要的效果,这里我们添加一个id="overlay"的div层,并且设置透明度0.8,生成一个覆盖层效果。
注意这里我们的docHeight,使用如下代码获取:
- var docHeight = $(document).height();
是不是非常简单,当然大家可以自己将这段代码修改成一个简单的jQuery插件,可以在开发的项目中重用!