基于jquery 完美的弹出层效果实例

一，基于jquery弹出层实例

先看实例

分析上面实例

其实这个效果目前都应用得很广泛了，也是一个Cool的交互效果，类似于vista执行一些需要权限较高的文件时弹出那个询问框。至于技术要点主要落在CSS上，基本的HTML结构很简单就是两个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为负的（自己高度的一半）。?

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

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

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

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

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，就很不错了。

二，jquery插件easyDialog弹出层

1. 增加了默认的弹出层内容模板，如果只是一些简单的应用，自己可以不去写弹出层内容的结构，而只需传几个简单的参数即可，原来的使用方法：

使用默认的内容模板，那么container参数可以这么用：

显示的效果如下图所示：

如果要修改默认的内容模板的样式，可以修改下载文档中的easydialog.css文件来实现你想要的样式。

2. 增加了拖拽效果，使弹出层有更好的用户体验，并且自定义弹出层内容也可以轻松实现拖拽效果。

3. 内部增加了缓存系统、微型事件处理系统，对弹出层内容也做了缓存，使弹出层性能更佳。

另外修改了一个参数的命名，原来的isOverlay改成了overlay，原来的弹出层各元素的id也重新命名，尽量避免冲突。

当然上面介绍的只是冰山一角了各种弹出层效果在网上可以找到这里不一一介绍了，本人觉得好所有提供了。