先来看最终效果图吧

?

例子 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中的效果）?

?

额……挺令人失望的，但是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应该没问题了吧，但是为什么阴影不是百分百高度呢……?

唉，还是给了我一个打击，在网上查了些资料，又回来看看代码，觉得是不是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，就很不错了。