jquery弹出层背景变暗 Lee dialog
作者:十字花匠 来源:十字花匠 时间:2008-08-18 13:11:00
经常会看到这种弹出层背景变暗的效果,感觉手痒于是自己写了一个基于jquery的弹出层类。
我习惯先写好结构和样式,然后再写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,通过它就可以把层内的内容给排好了。
看看演示:
相关下载:
下载最新版本jQuery
下载Lee dialog插件:
下载地址:dialog.js (2.17 KB)
更新
2008-8-16 层切换时加入动画
2008-8-15 完成基本功能
标签:jquery,弹出,层
0
投稿
猜你喜欢
python人工智能算法之决策树流程示例详解
2022-02-27 17:34:31
WEB2.0网页制作标准教程(3)定义语言编码
2007-11-13 13:23:00
Python tkinter进度条控件(Progressbar)的使用
2023-08-01 20:24:21
深入理解golang chan的使用
2024-05-10 13:59:06
Python多层装饰器用法实例分析
2023-08-20 07:34:35
MySQL的意向共享锁、意向排它锁和死锁
2024-01-14 18:16:02
vue-cli 首屏加载优化问题
2024-05-29 22:48:54
python深度学习tensorflow入门基础教程示例
2021-08-25 07:03:08
php中常用的正则表达式的介绍及应用实例代码
2024-05-03 15:35:24
常用SQL功能语句
2024-01-15 17:08:58
python beautifulsoup4 模块详情
2021-12-30 07:50:03
webpack 打包压缩js和css的方法示例
2023-07-02 05:18:32
安装sql server 2008时的4个常见错误和解决方法
2024-01-22 10:24:58
pycharm第三方库安装失败的问题及解决经验分享
2023-07-11 01:50:45
Python中的字典遍历备忘
2021-12-08 05:59:37
SpringBoot整合Mybatis使用Druid数据库连接池
2024-01-28 23:33:21
运用Python的webbrowser实现定时打开特定网页
2021-12-15 23:07:02
Python中对象迭代与反迭代的技巧总结
2023-06-08 04:25:33
安装Python和pygame及相应的环境变量配置(图文教程)
2023-09-05 15:54:42
JavaScript中你不知道的Object.entries用法
2024-04-19 11:01:40