在我們做項目的過程中難免會讓彈出層來展示一些信息，這里推薦一款比較不錯的jquery插件，下面說一下特點和新版本增加的功能

wBox特點

• • 背景透明度可以根據(jù)實際情況進行調(diào)節(jié)
  • 可以根據(jù)需要添加wBox標(biāo)題
  • 支持callback函數(shù)
  • 支持html內(nèi)容自定義
  • 支持在wBox顯示#ID的內(nèi)容
  • 支持Ajax頁面內(nèi)容
  • 支持iFrame
  • 支持wBox拖拽功能
  • ESC鍵，或者在背景上雙擊即可關(guān)閉wBox
  • class為wBox_close點擊可以關(guān)閉wBox，無論是組裝的html，還是隱藏的html，甚至于iframe的內(nèi)容中的.wBox_close

新功能

• 優(yōu)化代碼~
• 美化界面~
• 默認(rèn)可拖動，drag為false關(guān)閉
• 新增wBox關(guān)閉方法：wBox.close()
• 新增wBox打開方法：wBox.showBox()
• 新增wBox定時關(guān)閉設(shè)置：通過參數(shù)timeout設(shè)置定時關(guān)閉時間
• 新增在不觸發(fā)click事件的前提，顯示wBox，$(s).wBox({show:true})
• 去除燈箱功能（準(zhǔn)備做一個單獨的jQuery燈箱插件）
• 去除設(shè)置窗口位置

點擊此處可以下載：下載wbox

使用方法：

• 首先下載wBox文件，然后在將wBox中的
• 引入wbox.js文件
• 引入wbox.css文件

代碼：

var wBox=$("#wbox1").wBox({ title: "Test Title Name", html: "<div class='demo'>點擊彈出設(shè)置名字的wBox</div>" }); 顯示wBox,wBox.showBox() 關(guān)閉使用wBox.close()，顯示使用wBox.showBox() (1)點擊彈出2背景為透明的wBox　　 $("#wbox2").wBox({opacity:0,html:"<div class='demo'>點擊彈出背景為透明的wBox</div>"}); (2)彈出5秒鐘自動關(guān)閉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加載內(nèi)容 $("#ajax").wBox({requestType: "ajax",target:"1.html"}); (9)沒有標(biāo)題的彈出框 $("#noTitle").wBox({noTitle:true,html:"<div class='demo'>這是一個沒有標(biāo)題的wBox，ESC鍵關(guān)閉，或者雙擊背景關(guān)閉</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/，這上面說的非常詳細(xì)，這里不細(xì)說，主要說下使用過程當(dāng)中遇到的問題：

（1）模擬點擊框內(nèi)的按鈕

我需要彈出一個div，這個div是一個ajax請求，請求成功的時候我需要把當(dāng)前框框關(guān)閉，并彈出一個框框。我采取的是模擬點擊關(guān)閉按鈕，但是那個按鈕始終就是無法點擊，我在這個地方糾結(jié)了好久，后來終于找到了答案，比如你的關(guān)閉按鈕id為#cancel_btn，你可能會以為你直接這樣就可以了

$('#cancel_add').click();

因為你的id是你命名的，你認(rèn)為它肯定是唯一的，但實際上這樣是不行的，在它處理彈出框框的同時他好像是又重新生成了下這個div，也就是說當(dāng)前頁面中其實是有2個cancel_add的，所以你如果用上面的代碼是無法選擇到那個按鈕的。你需要用以下代碼選擇到它：

$('#wBox #cancel_btn).click();

這樣就可以了。

獲取div內(nèi)文本框id為content的值的時候我們需要這樣來獲取：

$('#wBox #content').val()

（2）關(guān)閉按鈕的效果不同

關(guān)閉的時候你可能會選擇一張圖片直接加個a連接，設(shè)置class為wBox_close,但在實際的運用過程當(dāng)中我發(fā)現(xiàn)這樣的關(guān)閉效果會導(dǎo)致光標(biāo)直接回到網(wǎng)頁頂部，也就說如果你的按鈕在最底部的話，猛的會跑到頂部，但是我不需要這個效果，我希望它還在原地，后來發(fā)現(xiàn)是因為沒有用div的緣故，仔細(xì)觀察你會發(fā)現(xiàn)默認(rèn)給的那個關(guān)閉按鈕是這樣表示的：

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

這個直接關(guān)閉的話它還會停留在原來的位置的。于是我在a連接的外面加個div，把div的class設(shè)置為wBox_close，效果一樣了。

如有朋友還碰到其他的問題可以發(fā)上來討論下。

（3）效果展示

（4）對于如何獲取文本框內(nèi)容

這個是對第（1）做出的一項補充，因為我后來發(fā)現(xiàn)在ie6、7下面，那樣是不行的，獲取文本框的值是undefind，就是說當(dāng)彈出div的時候，他這個插件其實是clone了當(dāng)前要顯示的div,這就導(dǎo)致了頁面中存在兩個相同div（包括里面的內(nèi)容）的情況，所以當(dāng)我們?nèi)≈祷蛞M點擊的時候就無法精確的選擇到元素，這里對源代碼進行了下改寫，在拷貝后把以前的那個div給清空，在關(guān)閉后再對其進行還原，這就防止了這種情況的發(fā)生。

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.在關(guān)閉的時候還原

找到

/* * 關(guān)閉彈出框就是移除還原 */ 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的情況改寫，如果有其他地方需要修改的，可以自行修改。當(dāng)然我的方法可能不是最好的方法，歡迎大家指正。

（5）彈出的框跑到頂部現(xiàn)象

? ? 我們會采用點擊a連接彈出相應(yīng)框，有時我們可能會用<a href="#" ?οnclick=...>這樣來彈出框，可能你不會注意，這里href="#"會被認(rèn)為是一個錨點，就跑到頁面的頂部了，我們使用<a ?href="javascript:;" οnclick=...>即可。

轉(zhuǎn)載于:https://blog.51cto.com/3001448/1205951

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。