原文地址为:
Jquery弹出层插件Thickbox使用心得
前段时间在建设银行项目上用EXT完整做了个单页系统,太赶了,没有记录下任何东西,现在都忘了,怪可惜的。这次项目用JQuery做js的东西。主要用了个弹出层控件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然后,在强制做垃圾回收,至少我是可以啦。哈哈。代码如下:
1
function tb_remove()
{
2
var seq=PopSeq();
3
$("#TB_imageOff"+seq).unbind("click");
4
$("#TB_closeWindowButton" + seq).unbind("click");
5![](https://i-blog.csdnimg.cn/blog_migrate/1553bc1c863899173c87ebf2aa836c76.png)
6![715f2d05503b99d41f3b6ba2cdccc84d.jpe](https://i-blog.csdnimg.cn/blog_migrate/8597f1d83cc2368df9f060992c3dbeab.png)
$("#TB_window" + seq).fadeOut("fast", function()
{
7![715f2d05503b99d41f3b6ba2cdccc84d.jpe](https://i-blog.csdnimg.cn/blog_migrate/8597f1d83cc2368df9f060992c3dbeab.png)
/**////手动移除ifrmae,IE的一个bug
8
$('#TB_iframeContent' + seq).remove();
9
$('#TB_window' + seq + ',#TB_overlay' + seq + ',#TB_HideSelect' + seq).trigger("unload").unbind().remove();
10![715f2d05503b99d41f3b6ba2cdccc84d.jpe](https://i-blog.csdnimg.cn/blog_migrate/8597f1d83cc2368df9f060992c3dbeab.png)
/**////自己调用垃圾回收,强制清楚iframe内存,解决文本框无法输入问题。
11
CollectGarbage();
12
});
13![715f2d05503b99d41f3b6ba2cdccc84d.jpe](https://i-blog.csdnimg.cn/blog_migrate/8597f1d83cc2368df9f060992c3dbeab.png)
if (typeof document.body.style.maxHeight == "undefined")
{//if IE 6
14![715f2d05503b99d41f3b6ba2cdccc84d.jpe](https://i-blog.csdnimg.cn/blog_migrate/8597f1d83cc2368df9f060992c3dbeab.png)
$("body","html").css(
{height: "auto", width: "auto"});
15
$("html").css("overflow","");
16
}
17
document.onkeydown = "";
18
document.onkeyup = "";
19
return false;
20
}
4.在asp.net中如何动态设置需要的参数和关闭弹出层。
症状:thickbox提供的例子都是需要在input后a的class加thickbox,而且参数什么都是固定的。 而我们传递的参数一般需要动态。
解决方法,使用asp.net ajax,不多说了。直接看代码吧。
封装一个popup类,
1
public
class
Popup
2
![](https://i-blog.csdnimg.cn/blog_migrate/156b3a452247379d066a7687077a8e2f.png)
{
3![](https://i-blog.csdnimg.cn/blog_migrate/8597f1d83cc2368df9f060992c3dbeab.png)
/**//// <summary>
4
/// show the pop up div
5
/// </summary>
6
/// <param name="panel">container the button</param>
7
/// <param name="url"></param>
8
public static void ShowPopup(UpdatePanel panel, string url)
9![](https://i-blog.csdnimg.cn/blog_migrate/8597f1d83cc2368df9f060992c3dbeab.png)
{
10
ScriptManager.RegisterClientScriptBlock(panel, panel.GetType(), "ShowPopup", "ShowPopup('" + url + "')", true);
11
}
12![](https://i-blog.csdnimg.cn/blog_migrate/1553bc1c863899173c87ebf2aa836c76.png)
13![](https://i-blog.csdnimg.cn/blog_migrate/8597f1d83cc2368df9f060992c3dbeab.png)
/**//// <summary>
14
///
15
/// </summary>
16
/// <param name="panel"></param>
17
/// <param name="page">request page</param>
18
public static void ClosePopup(UpdatePanel panel)
19![](https://i-blog.csdnimg.cn/blog_migrate/8597f1d83cc2368df9f060992c3dbeab.png)
{
20![](https://i-blog.csdnimg.cn/blog_migrate/1553bc1c863899173c87ebf2aa836c76.png)
21
string js = " self.parent.tb_remove();";
22![](https://i-blog.csdnimg.cn/blog_migrate/1553bc1c863899173c87ebf2aa836c76.png)
23
ScriptManager.RegisterClientScriptBlock(panel, panel.GetType(),"closepopup", js, true);
24
}
25
}
需要的js
1
function ShowPopup(url)
{
2
window.top.tb_show(null, url, false);
3![](https://i-blog.csdnimg.cn/blog_migrate/1553bc1c863899173c87ebf2aa836c76.png)
4
}
页面上例子
1
/**/
///add按钮需要放在updatepanel里面
2
protected
void
btnAdd_Click(
object
sender, EventArgs e)
3
![](https://i-blog.csdnimg.cn/blog_migrate/156b3a452247379d066a7687077a8e2f.png)
{
4![](https://i-blog.csdnimg.cn/blog_migrate/8597f1d83cc2368df9f060992c3dbeab.png)
/**////自己组参数
5
string url = "aa.aspx?height=180&width=400&Type="+ddlType.SelectedItem.Value;
6
url += "&TB_iframe=true&TB_iniframe=true&modal=true";
7
Popup.ShowPopup(this.upButtons, url);
8
}
不足:由于现在我的不需要支持ie6。所以我也一直没把我的插件改到支持ie6.如果有那个朋友修改好了麻烦共享一下。
转载请注明本文地址:
Jquery弹出层插件Thickbox使用心得