jQuery彈出層插件Thickbox使用方法

這篇文章主要介紹“jQuery彈出層插件Thickbox使用方法”，在日常操作中，相信很多人在jQuery彈出層插件Thickbox使用方法問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”jQuery彈出層插件Thickbox使用方法”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

Thickbox官方網站（上面有例子和基本的使用方法）：http://jquery.com/demo/thickbox/

就我使用過程中，Thickbox常見問題：

1。跨iframe的彈出層。

癥狀：每次thickbox都只在frame中彈出，而不會整個屏幕覆蓋

原因和解決方法：

thickbox使用tb_show()函數在body后面加入彈出層。可以使用window.top.tb_show()把彈出層加到頁面上。我的tihickbox插件中修改如下：在tb_init（）中把tb_show(t,a,g)替換如下

if(a.indexOf('TB_iniframe')!=-1)  {  window.top.tb_show(t,a,g);  }  else  {  tb_show(t,a,g);  }

這樣只只要在原來的鏈接上加入TB_iniframe=true即可，如div.aspx?height=180&width=400&TB_iframe=true&TB_iniframe=true&modal=true

2.thickbox只支持一層彈出，不可支持多層彈出。

修改過的控件已經支持（不足：ie6下失效彈出層失效了，占時沒解決，哈哈）

3.彈出層關閉后，文本框無法聚焦。

癥狀：關閉彈出層后，原來頁面上的文本框無法聚焦

原因和解決方法：這個的原因不好說，很多人都認為是ie本身的bug。是由于iframe沒有移除，即使移除了。內存上也么有清除造成的。這也是我猜的。哈哈。解決方法是在tb_remove()中先手動移除iframe然后，在強制做垃圾回收，至少我是可以啦。哈哈。代碼如下：

1functiontb_remove(){
2varseq=PopSeq();
3$("#TB_imageOff"+seq).unbind("click");
4$("#TB_closeWindowButton"+seq).unbind("click");
5
6$("#TB_window"+seq).fadeOut("fast",function(){
7/**////手動移除ifrmae，IE的一個bug
8$('#TB_iframeContent'+seq).remove();
9$('#TB_window'+seq+',#TB_overlay'+seq+',#TB_HideSelect'+seq).trigger("unload").unbind().remove();
10/**////自己調用垃圾回收，強制清楚iframe內存，解決文本框無法輸入問題。
11CollectGarbage();
12});
13if(typeofdocument.body.style.maxHeight=="undefined"){//ifIE6
14$("body","html").css({height:"auto",width:"auto"});
15$("html").css("overflow","");
16}
17document.onkeydown="";
18document.onkeyup="";
19returnfalse;
20}

4.在asp.net中如何動態設置需要的參數和關閉彈出層。

癥狀：thickbox提供的例子都是需要在input后a的class加thickbox，而且參數什么都是固定的。而我們傳遞的參數一般需要動態。

解決方法，使用asp.netajax，不多說了。直接看代碼吧。

封裝一個popup類，

1publicclassPopup
2{
3/**////<summary>
4///showthepopupdiv
5///</summary>
6///<paramname="panel">containerthebutton</param>
7///<paramname="url"></param>
8publicstaticvoidShowPopup(UpdatePanelpanel,stringurl)
9{
10ScriptManager.RegisterClientScriptBlock(panel,panel.GetType(),"ShowPopup","ShowPopup('"+url+"')",true);
11}
12
13/**////<summary>
14///
15///</summary>
16///<paramname="panel"></param>
17///<paramname="page">requestpage</param>
18publicstaticvoidClosePopup(UpdatePanelpanel)
19{
20
21stringjs="self.parent.tb_remove();";
22
23ScriptManager.RegisterClientScriptBlock(panel,panel.GetType(),"closepopup",js,true);
24}
25}

需要的js

functionShowPopup(url){  window.top.tb_show(null,url,false);  }

頁面上例子

1/**////add按鈕需要放在updatepanel里面
2protectedvoidbtnAdd_Click(objectsender,EventArgse)
3{
4/**////自己組參數
5stringurl="aa.aspx?height=180&width=400&Type="+ddlType.SelectedItem.Value;
6url+="&TB_iframe=true&TB_iniframe=true&modal=true";
7Popup.ShowPopup(this.upButtons,url);
8}

不足：由于現在我的不需要支持ie6。所以我也一直沒把我的插件改到支持ie6.

到此，關于“jQuery彈出層插件Thickbox使用方法”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！