Jquery插件Thickbox的使用总结及自定义设

thickbox运行需要的文件
 
首先在 html 文件的 head中导入jquery.js 和thickbox.js文件，导入 thickbox.css 文件;并且jquery.js 文件放在前面：
 

<script src="../scripts/jquery-latest.pack.js" mce_src="scripts/jquery-latest.pack.js" type="text/javascript">script>      <script src="../scripts/thickbox.js" mce_src="scripts/thickbox.js" type="text/javascript">script>  <link href="../styles/thickbox.css" mce_href="styles/thickbox.css" rel="stylesheet" type="text/css" />  

 最后你只要给元素添加 class=”thickbox” 属性就可以开始用 thickbox
 
实现了一张图片的弹出展示功能：
 

<a href="”bg.jpg”" mce_href="”bg.jpg”" class=”thickbox” ><img src="”bg.jpg”" mce_src="”bg.jpg”" alt=”图片”/>a>  //只需要指定图片的class为thickbox

 弹出框使用方法：
 

<a href="default.aspx?keepthis=true&tb_iframe=true&height=400&width=500" title="主页" class="thickbox" a>  <input onclick="/banneduserlist!unbanneduserlist?height=400&width=800&inlineid=myonpagecontent" title="弹出层" class="thickbox" type="button" value="ban another" />  //内嵌内容  <input alt="#tb_inline?height=300&width=400&inlineid=myonpagecontent" title="标题" class="thickbox" type="button" value="show" />    <a href="#tb_inline?height=155&width=300&inlineid=hiddenmodalcontent&modal=true" class="thickbox">显示隐藏内容a>  //遮罩层  url后面加?keepthis=true&tb_iframe=true&height=400&width=600  参数字符串中加 modal=true  ?keepthis=true&tb_iframe=true&height=400&width=600&modal=true  这样当关闭thickbox时会调用thickbox iframe (self.parent.tb_remove())内部的一个tb_remove()函数  所有其他参数字符都必须在tb_iframe 参数之前。url中所有"tb" 之后的将被移除。  <a href="index.html?keepthis=true&tb_iframe=true&height=250&width=400" title="标题" class="thickbox">打开一个页面a>    <a href="index.html?keepthis=true&tb_iframe=true&height=300&width=500" title="标题" class="thickbox">打开一个页面a>  <a href="index.html?placevaluesbeforetb_=savedvalues&tb_iframe=true&height=200&width=300&modal=true" title="标题" class="thickbo

 自定义设置：
1、弹出窗口(div)右上角的关闭按钮为显示为"close or esc key"，而不是中文的; 如果想把它变成[x]或"关闭"应该怎么来办呢？
 

将thickbox.js文件打开，查找关键字"or esc key"，将其删除，并将前面的close更改为[x]或"关闭"，然后把文件另存为utf-8格式，如果不保存为utf-8的话

 2、thickbox 弹出层的遮住层透明度修改
打开thickbox.css查找.tb_overlaybg 进行更改
 

.tb_overlaybg {   background-color:#000;   filter:alpha(opacity=75);   -moz-opacity: 0.75;   opacity: 0.75;  }

 
3、关闭层：如果我们需要自己添加一个关闭按钮或者图片可以使用：

onclick="self.parent.tb_remove();"  

 4、关闭层刷新父页面,修改关闭方法 ：

function tb_remove() { 	$("#tb_imageoff").unbind("click");	$("#tb_closewindowbutton").unbind("click");	$("#tb_window").fadeout("fast",function(){$('#tb_window,#tb_overlay,#tb_hideselect').trigger("unload").unbind().remove();});	$("#tb_load").remove();	if (typeof document.body.style.maxheight == "undefined") {//if ie 6		$("body","html").css({height: "auto", width: "auto"});		$("html").css("overflow","");	}	document.onkeydown = "";	document.onkeyup = "";	//刷新父页面，未指定	window.location.reload();	return false;}

 5、thickbox插件默认情况是点击灰色的遮罩层就会关闭取消

把两个$("#tb_overlay").click(tb_remove);去掉就可以取消掉

 6、updatepanel回发后thickbox失效的解决方法

只需把以下代码粘贴至页面中就ok了。< type="text/javascript" language="javascript">function pageload(){    var isasyncpostback = sys.webforms.pagerequestmanager.getinstance().get_isinasyncpostback();    if (isasyncpostback)     {        tb_init('a.thickbox, area.thickbox, input.thickbox');    }}