[置頂]       推薦一款好用的jquery彈出層插件——wbox

新功能

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

點(diǎn)擊此處可以下載：下載wbox

使用方法：

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

代碼：

var wBox=$("#wbox1").wBox({ title: "Test Title Name", html: "<div class='demo'>點(diǎn)擊彈出設(shè)置名字的wBox</div>" });  顯示wBox,wBox.showBox() 關(guān)閉使用wBox.close()，顯示使用wBox.showBox()

(1)點(diǎn)擊彈出2背景為透明的wBox　　

$("#wbox2").wBox({opacity:0,html:"<div class='demo'>點(diǎn)擊彈出背景為透明的wBox</div>"});

(2)彈出5秒鐘自動(dòng)關(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'>這是一個(gè)沒有標(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）模擬點(diǎn)擊框內(nèi)的按鈕

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

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

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

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

這樣就可以了。

獲取div內(nèi)文本框id為content的值的時(shí)候我們需要這樣來獲?。?/span>

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

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

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

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

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

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

（3）效果展示

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

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

1.在彈出的時(shí)候增加清空操作

找到

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)閉的時(shí)候還原

找到

/*  * 關(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的情況進(jìn)行改寫的，所以我選擇的是如果有target的情況改寫，如果有其他地方需要修改的，可以自行修改。當(dāng)然我的方法可能不是最好的方法，歡迎大家指正。

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

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