閱讀原文：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:{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>普加地圖</span>--<span>可拖拽</span>',
html:"<div id='myMap' style='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的情況改寫，如果有其他地方需要修改的，可以自行修改。當然我的方法可能不是最好的方法，歡迎大家指正。

總結

以上是生活随笔為你收集整理的推荐一款好用的jquery弹出层插件——wbox的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。