推荐一款好用的jquery弹出层插件——wbox
来源:互联网 发布:淘宝执行运营工资高吗 编辑:程序博客网 时间:2024/04/25 20:05
在我们做项目的过程中难免会让弹出层来展示一些信息,这里推荐一款比较不错的jquery插件,下面说一下特点和新版本增加的功能
wBox特点
背景透明度可以根据实际情况进行调节
可以根据需要添加wBox标题
支持callback函数
支持html内容自定义
支持在wBox显示#ID的内容
支持Ajax页面内容
支持iFrame
支持wBox拖拽功能
ESC键,或者在背景上双击即可关闭wBox
class为wBox_close点击可以关闭wBox,无论是组装的html,还是隐藏的html,甚至于iframe的内容中的.wBox_close
新功能
优化代码~
美化界面~
默认可拖动,drag为false关闭
新增wBox关闭方法:wBox.close()
新增wBox打开方法:wBox.showBox()
新增wBox定时关闭设置:通过参数timeout设置定时关闭时间
新增在不触发click事件的前提,显示wBox,$(s).wBox({show:true})
去除灯箱功能(准备做一个单独的jQuery灯箱插件)
去除设置窗口位置
点击此处可以下载:下载wbox
使用方法:
首先下载wBox文件,然后在将wBox中的
引入wbox.js文件
引入wbox.css文件
代码:
(1)点击弹出2背景为透明的wBox
(2)弹出5秒钟自动关闭wBox
(3)图片wBox
(4)隐藏id为#info的层
(5)不可拖拽的#wBoxUL层
(6)iframe google
(7)本地iframe 自适用高度
(8)Ajax加载内容
(9)没有标题的弹出框
(10)利用callback添加地图的wBox
具体的使用例子演示参看http://js8.in/wbox/,这上面说的非常详细,这里不细说,主要说下使用过程当中遇到的问题:
(1)模拟点击框内的按钮
我需要弹出一个div,这个div是一个ajax请求,请求成功的时候我需要把当前框框关闭,并弹出一个框框。我采取的是模拟点击关闭按钮,但是那个按钮始终就是无法点击,我在这个地方纠结了好久,后来终于找到了答案,比如你的关闭按钮id为#cancel_btn,你可能会以为你直接这样就可以了
因为你的id是你命名的,你认为它肯定是唯一的,但实际上这样是不行的,在它处理弹出框框的同时他好像是又重新生成了下这个div,也就是说当前页面中其实是有2个cancel_add的,所以你如果用上面的代码是无法选择到那个按钮的。你需要用以下代码选择到它:
这样就可以了。
获取div内文本框id为content的值的时候我们需要这样来获取:
(2)关闭按钮的效果不同
关闭的时候你可能会选择一张图片直接加个a连接,设置class为wBox_close,但在实际的运用过程当中我发现这样的关闭效果会导致光标直接回到网页顶部,也就说如果你的按钮在最底部的话,猛的会跑到顶部,但是我不需要这个效果,我希望它还在原地,后来发现是因为没有用div的缘故,仔细观察你会发现默认给的那个关闭按钮是这样表示的:
这个直接关闭的话它还会停留在原来的位置的。于是我在a连接的外面加个div,把div的class设置为wBox_close,效果一样了。
如有朋友还碰到其他的问题可以发上来讨论下。
(3)效果展示
(4)对于如何获取文本框内容
这个是对第(1)做出的一项补充,因为我后来发现在ie6、7下面,那样是不行的,获取文本框的值是undefind,就是说当弹出div的时候,他这个插件其实是clone了当前要显示的div,这就导致了页面中存在两个相同div(包括里面的内容)的情况,所以当我们取值或要模拟点击的时候就无法精确的选择到元素,这里对源代码进行了下改写,在拷贝后把以前的那个div给清空,在关闭后再对其进行还原,这就防止了这种情况的发生。
1.在弹出的时候增加清空操作
找到
修改为:
2.在关闭的时候还原
找到
修改为:
我这里只是以我需要的情况来修改代码,我是针对弹出div的情况进行改写的,所以我选择的是如果有target的情况改写,如果有其他地方需要修改的,可以自行修改。当然我的方法可能不是最好的方法,欢迎大家指正。
(5)弹出的框跑到顶部现象
我们会采用点击a连接弹出相应框,有时我们可能会用<a href="#" onclick=...>这样来弹出框,可能你不会注意,这里href="#"会被认为是一个錨点,就跑到页面的顶部了,我们使用<a href="javascript:;" onclick=...>即可。
这里贴上我修改后的js代码
源码下载
- 推荐一款好用的jquery弹出层插件——wbox
- 推荐一款好用的jquery弹出层插件——wbox
- 推荐一款好用的jquery弹出层插件——wbox
- 推荐一款好用的jquery弹出层插件——wbox
- 推荐一款好用Jquery弹出层插件
- jQuery插件---轻量级的弹出窗口wBox
- jquery弹出层 wbox使用
- 弹出层窗口插件:WBOX的优点和陷井
- jquery弹出框插件 很好用 wbox
- fancybox 是一款优秀的 jquery 弹出层展示插件
- 10个jQuery弹出层插件推荐
- 推荐一款好用的Visual Studio插件
- jquery插件——弹出层(Tipswindown)
- jquery插件——弹出层(Tipswindown)
- 推荐一款好用的博客软件——菊子曰
- 一款好用的插件——油猴子
- jquery 弹出层 插件
- Jquery 弹出层插件
- 流量劫持是如何产生的?
- installArchives()failed: dpkg: dependency problems prevent configuration ofbcompare:i386: bcompar
- SystemConfigrationServlet
- libGDX视频教程(一) -- 初识libGDX
- iOS设计模式之四:备忘录模式和命令模式
- 推荐一款好用的jquery弹出层插件——wbox
- SVN权限配置
- 总有一些缘,自认为刻骨铭心,而美丽难以触及
- POJ 3693 Maximum repetition substring (后缀数组)
- HuaweiOJ-扑克牌大小
- yii2中集成使用kindeditor富文本编辑器
- AnimatePacker3.0接口封装
- Swift中文教程(七) 闭包
- 分布式缓存中三种负载均衡的方法