先来看最终效果图吧

201001021262426657?

例子 http://paperen.com/demo/pop-box/

其实这个效果目前都应用得很广泛了,也是一个Cool的交互效果,类似于vista执行一些需要权限较高的文件时弹出那个询问框。至于技术要点主要落在CSS上,基本的HTML结构很简单就是两个div

<div class="shadow" id="p_shadow"></div>
<div class="popbox" id="p_popbox">box</div>

理论上,我们只要设定class为shadow的那个div的position为fixed,top为0,left为0,高度为100%,宽度为100%,z-index为一个较大的值(保证它能在所有元素的上方),设背景色再加上滤镜效果。?

而对于class为popbox而言,设置z-index比shadow大,position为fixed,top为50%,left为50%,固定宽与高,然后margin-left为负的(自己宽度的一半),margin-top为负的(自己高度的一半)。?

.shadow{display:none;background:#000000;width:100%;height:100%;left:0;top:0;filter:alpha(opacity=40);opacity:0.4;z-index:999;position:fixed;}
.popbox{display:none;z-index:1001;width:400px;height:100px;background:#F7F7F7;border:1px #999999 solid;position:fixed;top:50%;left:50%;margin:-50px 0px 0px -200px;}

?paperen我这里说的是理论上而已…实际上就没那么简单了,因为我们得要考虑到某些浏览器,例如可恶的ie5,ie6。我们不妨将上面理论上的写成CSS代码,看看效果(特别是ie6中的效果)?

201001021262427886?

额……挺令人失望的,但是ie7与火狐(FF)还有opera中的效果都是很好的,所以paperen我才说可恶的ie6,确实如果全世界都将ie5,ie6淘汰掉的话,确实可以救活很多人的脑细胞,但是很明显我们这种希望是不可能的,按目前来看ie6似乎是不会这么快就被淘汰掉的,很多人使用的还是ie6,paperen的宿友电脑上就还有使用ie6的,这个可恶又不可逃避的ie6……?

抱怨归抱怨,毕竟这些浏览器对CSS的解析BUG都是历史问题了再抱怨也没用,还是得寻求办法解决,我们要使我们的代码兼容所有浏览器,那么来看看应该怎做吧。?

因为ie6不支持fixed这个属性,我们只能使用absolute这个进行定位,但是还要加入一些expression,这个也是个很特殊的属性,其实就是个JavaScript。?

_position:absolute;_top:expression(eval(document.compatMode && document.compatMode=='CSS1Compat') ? documentElement.scrollTop + (document.documentElement.clientHeight-this.offsetHeight)/2 : document.body.scrollTop + (document.body.clientHeight - this.clientHeight)/2);

document.body.scrollTop+(document.body.clientHeight-this.clientHeight)/2这句是什么意思?其实paperen自己也没搞太清楚,不过自己也是研究了半天,觉得意思就是滑动条到滑动条顶部的距离+(屏幕的高度-这个div的高度)/2,自己可以想想这个js的意思,就是要保持div一直处于屏幕的中部。(当然你还可以自己去谷歌一下)?

paperen我很兴奋地以为这次ie6应该没问题了吧,但是为什么阴影不是百分百高度呢……201001021262429281?

唉,还是给了我一个打击,在网上查了些资料,又回来看看代码,觉得是不是body高度的问题啊,对于这个div设置成百分百高度的话,是不是body也应该设置成百分百高度才行?加上body{hegiht:100%;}果然有用,paperen我也找了些资料来说明这个问题。?

一个对象高度是否可以使用百分比显示,取决于对象的父级对象,.shadow在页面中直接在body之中,因此它的父级是body,而浏览器默认状态下,是没有给body一个高度属性的,因此当我们直接设置.shadow为height:100%;时,不会产生任何效果,而当我们给body设置了100%之后,它的子级对象.shadow的height:100%;便发生作用了,这便是浏览器解析规则引发的高度自适应问题。而代码中除了给body应用之外,还给HTML对象也应用相同的样式设计,这样做的好处是使IE与firefox浏览器都能够实现高度自适应,而body却不是。另外,Firefox中的HTML标签不是100%高度,因此给两个标签都定义为height:100%;以保证两个浏览器下均能够正常显示。?

也就是说我们要加上html,body{hegiht:100%;}这句。好了,终于这个效果兼容ie6了,真是不容易啊~~?

最后自己再渲染一下那个pop box的样式,加上一些脚本触发弹出与关闭的事件,用jquery加上一些效果fadeIn,fadeOut,就很不错了。