南方网景
【南方网景】是提供网站建设、网页设计、推广优化和软件开发的互联网综合服务商
点击这里给我发消息 点击这里给我发消息
数据下载中,请稍后...
点击这里给我发消息 点击这里给我发消息
网页设计经常用到的弹出框控件
添加时间:2010-2-2
    关键词: 网页 设计 网页设计 页面 网页

经常会看到这种弹出层背景变暗的效果,感觉手痒于是自己写了一个基于jquery的弹出层类,相比ThickBox来说比较简单,功能没它那么强大。

我习惯先写好结构和样式,然后再写js交互效果。结构定义了两个层,一个为半透明的背景层,一个是弹出层主要结构,都设为浮动position:absolute;背景层遮掉所有body内容很容易做到。主要层左右居中,设置left等于窗口宽除二减去自身层宽除二就居中了,至于窗口上下居中我没做到,固定了top等于滚动条隐去的scrollTop加上50px;

当事件触发这个类时,首先判断一下两个层是否已经append到body里面,否则每次触发它就一直增加增加了。设置了五个参数title、content、width、height、cssName,它们分别定义了层标题、层内内容、层宽、层高、层内容的样式名。层内内容又设置了url、text、id、iframe四种加载方式,通过ajax以get或post加载目标url的html内容,text是直接在事件里写入内容,而id是取得页面上某个id里面的html显示到弹出层里,iframe都知道是在层里面以框架显示目标url了。往往弹出层里面的内容样式也是各种各样的,所以加了一个参数cssName,通过它就可以把层内的内容给排好了。

Lee dialog
 
具体例子参考:
http://www.xij.cn/blog/wp-content/uploads/2008/08/dialog/
咨询热线:020-85648757 85648755 85648616 0755-27912581 客服:020-85648756 0755-27912581 业务传真:020-32579052
广州市网景网络科技有限公司 Copyright◎2003-2008 Veelink.com. All Rights Reserved.
广州商务地址:广东省广州市黄埔大道中203号(海景园区)海景花园C栋501室
= 深圳商务地址:深圳市宝源路华丰宝源大厦606
研发中心:广东广州市天河软件园海景园区 粤ICP备05103322号 工商注册