wBox是一款轻量级的弹出窗口插件，压缩后仅仅3.65Kb，基于jQuery1.4.2开发，主要实现弹出框的效果，并且加入了很多有趣的功能，比如callback函数，显示隐藏层，Ajax页面，iframe嵌入页面……
1:可以根据需要添加wBox标题,用title定义，如title没定义，将显示wbox.js里title设置的值； 2:可以用html定义wBox内容，如果没有定义，将显示wbox.js里html设置的值，默认为空； 3:用timeout可以设置wBox显示的时间； 4:通过noTitle:true可以设置弹出的wBox标题不显示； 5:通过requestType可以设置返回的图片、ajax加载其它页面的内容或iFrame 并显示于wbox中； 6:所有class为wBox_close的点击可以关闭wbox； 7:默认可拖动，drag为false关闭 8:新增wBox关闭方法：wBox.close() 9:新增wBox打开方法：wBox.showBox()
实例：需要注意的是要先下载Wbox插件，下载地址为：http://code.google.com/p/jquery-wbox/downloads/list，下载完成后需将wbox.js、jquery库和wbox.css三个文件引入，详细用法见下例，可去掉注释逐个尝试效果······
index.html文件内容：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>test</title> <link href="wbox/wbox.css" rel="stylesheet" /> <script language="javascript" src="jquery1.4.2.js"></script> <script language="javascript" src="wbox.js"></script> </head> <body> <script> $(document).ready(function(){ //可以根据需要添加wBox标题,用title定义，如title没定义，将显示wbox.js里title设置的值； //可以用html定义wBox内容，如果没有定义，将显示wbox.js里html设置的值，默认 /* var wBox=$("#show_box").wBox({title: "My name is Adam Li.",html: "我的中文名叫李汉团！"}); */ //用timeout可以设置wBox显示的时间 //var wBox = $("#show_box").wBox({html:"My name is Adam",timeout:"5000"}); //通过noTitle:true可以设置弹出的wBox标题不显示 //var wBox = $("#show_box").wBox({noTitle:true,html:"My name is Adam",timeout:"5000"}); //通过requestType可以设置返回的图片、ajax加载其它页面的内容或iFrame 并显示于wbox中； //var wBox = $("#show_box").wBox({noTitle:true,requestType:"img",target:"loading.gif"}); //var wBox = $("#show_box").wBox({noTitle:true,requestType:"ajax",target:"1.html"}); /* varwBox=$("#show_box").wBox({ noTitle:true,requestType:"iframe",iframeWH:{"800px",height:"200px"},target:"http://www.baidu.com" }); */ //var wBox = $("#show_box").wBox({noTitle:true,requestType:"iframe",iframeWH:{800,height:800},target:"1.html"}); //所有class为wBox_close的点击可以关闭wbox； var wBox = $("#show_box").wBox({noTitle:true,requestType:"iframe",target:"1.html"}); $("#but").click(function(){ wBox.showBox(); }) }) </script> <div id="show_box"></div> <input type="button" id="but" value="show box" /> </body> </html>
1.html文件内容：
<body> <div>My name is Adam Li，中文名李汉团！</div> </body>
如果开发环境是cakephp的话，使用wBox也很容易，只需把wbox.css放入到app/webroot/css中，把wbox.js和jquery库文件放入到app/webroot/js中，然后再在视图文件引入即可，当然也可以在layout中引入。
宝贝网址：