扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
在我们做项目的过程中难免会让弹出层来展示一些信息，这里推荐一款比较不错的jquery插件，下面说一下特点和新版本增加的功能
成都创新互联10多年企业网站制作服务;为您提供网站建设,网站制作,网页设计及高端网站定制服务,企业网站制作及推广,对PVC花箱等多个方面拥有丰富设计经验的网站建设公司。
点击此处可以下载：下载wbox
使用方法：
代码：
var wBox=$("#wbox1").wBox({ title: "Test Title Name", html: "点击弹出设置名字的wBox" }); 显示wBox,wBox.showBox() 关闭使用wBox.close()，显示使用wBox.showBox() (1)点击弹出2背景为透明的wBox
$("#wbox2").wBox({opacity:0,html:"点击弹出背景为透明的wBox"});(2)弹出5秒钟自动关闭wBox
$("#wbox3").wBox({target:"#info",timeout:5000});(3)图片wBox
$('.wboxImg').wBox({target:"004.jpg",requestType:"img"});(4)隐藏id为#info的层
$('.wbox').wBox({target:"#info"});(5)不可拖拽的#wBoxUL层
$('#drag').wBox({drag:false,title:'wBox功能简介部分的层',target:"#info"});(6)iframe google
$("#isFrame").wBox({requestType:"iframe",iframeWH:{width:800,height:400},target:"http://google.com"}(7)本地iframe 自适用高度
$("#isFrame2").wBox({ requestType: "iframe", target:"500x400.html" });(8)Ajax加载内容
$("#ajax").wBox({requestType: "ajax",target:"1.html"});(9)没有标题的弹出框
$("#noTitle").wBox({noTitle:true,html:"这是一个没有标题的wBox，ESC键关闭，或者双击背景关闭"});(10)利用callback添加地图的wBox
var maplet=null; oo=false; var callback=function(){ maplet = new Maplet('myMap'); maplet.centerAndZoom(new MPoint('HEUIDVZVVHUEEU'),8); maplet.addControl(new MStandardControl({view: {pan:false,ruler: false}})); } $("#map").wBox({ title:'普加地图--可拖拽', html:"", callBack:callback,drag:true}); 具体的使用例子演示参看http://js8.in/wbox/，这上面说的非常详细，这里不细说，主要说下使用过程当中遇到的问题：
（1）模拟点击框内的按钮
我需要弹出一个div，这个div是一个ajax请求，请求成功的时候我需要把当前框框关闭，并弹出一个框框。我采取的是模拟点击关闭按钮，但是那个按钮始终就是无法点击，我在这个地方纠结了好久，后来终于找到了答案，比如你的关闭按钮id为#cancel_btn，你可能会以为你直接这样就可以了
$('#cancel_add').click();因为你的id是你命名的，你认为它肯定是唯一的，但实际上这样是不行的，在它处理弹出框框的同时他好像是又重新生成了下这个div，也就是说当前页面中其实是有2个cancel_add的，所以你如果用上面的代码是无法选择到那个按钮的。你需要用以下代码选择到它：
$('#wBox #cancel_btn).click();这样就可以了。
获取div内文本框id为content的值的时候我们需要这样来获取：
$('#wBox #content').val()（2）关闭按钮的效果不同
关闭的时候你可能会选择一张图片直接加个a连接，设置class为wBox_close,但在实际的运用过程当中我发现这样的关闭效果会导致光标直接回到网页顶部，也就说如果你的按钮在最底部的话，猛的会跑到顶部，但是我不需要这个效果，我希望它还在原地，后来发现是因为没有用div的缘故，仔细观察你会发现默认给的那个关闭按钮是这样表示的：
这个直接关闭的话它还会停留在原来的位置的。于是我在a连接的外面加个div，把div的class设置为wBox_close，效果一样了。
如有朋友还碰到其他的问题可以发上来讨论下。
（3）效果展示
![[置顶] 推荐一款好用的jquery弹出层插件——wbox](http://pic002.cnblogs.com/images/2012/360086/2012121713115294.jpg)
（4）对于如何获取文本框内容
这个是对第（1）做出的一项补充，因为我后来发现在ie6、7下面，那样是不行的，获取文本框的值是undefind，就是说当弹出div的时候，他这个插件其实是clone了当前要显示的div,这就导致了页面中存在两个相同div（包括里面的内容）的情况，所以当我们取值或要模拟点击的时候就无法精确的选择到元素，这里对源代码进行了下改写，在拷贝后把以前的那个div给清空，在关闭后再对其进行还原，这就防止了这种情况的发生。
1.在弹出的时候增加清空操作
找到
if (_this.YQ.target) { con.replaceWith($(_this.YQ.target).clone(true).show()); }
修改为：
if (_this.YQ.target) {
var clone_html=$(_this.YQ.target).clone(true).show();$(_this.YQ.target).empty();//将其清空 con.replaceWith(clone_html); }2.在关闭的时候还原
找到
/* * 关闭弹出框就是移除还原*/ this.close=function (){if (C) { B.remove(); C.stop().fadeOut(300, function(){ C.remove(); }) } } 修改为：
this.close=function (){if (_this.YQ.target) { $(_this.YQ.target).html(C.find(_this.YQ.target).html()); }if (C) { B.remove(); C.stop().fadeOut(300, function(){ C.remove(); }) } }
我这里只是以我需要的情况来修改代码，我是针对弹出div的情况进行改写的，所以我选择的是如果有target的情况改写，如果有其他地方需要修改的，可以自行修改。当然我的方法可能不是最好的方法，欢迎大家指正。
（5）弹出的框跑到顶部现象
我们会采用点击a连接弹出相应框，有时我们可能会用这样来弹出框，可能你不会注意，这里href="#"会被认为是一个錨点，就跑到页面的顶部了，我们使用即可。
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
微信二维码
移动版官网