推荐一款好用的jquery弹出层插件——wbox

阅读原文：http://www.xuejiehome.com/blread-1621.html

在我们做项目的过程中难免会让弹出层来展示一些信息，这里推荐一款比较不错的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文件

代码：

var wBox=$("#wbox1").wBox({
title: "Test Title Name",
html: "<div class='demo'>点击弹出设置名字的wBox</div>"
});

显示wBox,wBox.showBox()
关闭使用wBox.close()，显示使用wBox.showBox()

(1)点击弹出2背景为透明的wBox

$("#wbox2").wBox({opacity:0,html:"<div class='demo'>点击弹出背景为透明的wBox</div>"});

(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:"<div class='demo'>这是一个没有标题的wBox，ESC键关闭，或者双击背景关闭</div>"});

(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:'<span style="font-size:14px">普加地图</span>--<span style="font-size:12px">可拖拽</span>',
html:"<div id='myMap' style='width:500px;height:400px;'></div>",
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的缘故，仔细观察你会发现默认给的那个关闭按钮是这样表示的：

<div class="wBox_close"></div>

这个直接关闭的话它还会停留在原来的位置的。于是我在a连接的外面加个div，把div的class设置为wBox_close，效果一样了。

如有朋友还碰到其他的问题可以发上来讨论下。

（3）效果展示

（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的情况改写，如果有其他地方需要修改的，可以自行修改。当然我的方法可能不是最好的方法，欢迎大家指正。

posted @ 2013-11-21 10:16 坏混混阅读(487) 评论(0) 编辑收藏举报

刷新页面返回顶部