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/**////
4///showthepopupdiv
5///

6///containerthebutton
7///
8publicstaticvoidShowPopup(UpdatePanelpanel,stringurl)
9{
10ScriptManager.RegisterClientScriptBlock(panel,panel.GetType(),"ShowPopup","ShowPopup('"+url+"')",true);
11}
12
13/**////
14///
15///

16///
17///requestpage
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使用心得
网址分享：http://www.shufengxianlan.com/qtweb/news4/468304.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容