这篇文章主要介绍“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使用方法”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注亿速云网站,小编会继续努力为大家带来更多实用的文章!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。