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

最新推荐文章于 2020-10-06 09:32:00 发布

转载最新推荐文章于 2020-10-06 09:32:00 发布 · 971 阅读

jquery 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了ThickBox插件的安装步骤与使用方法，包括如何导入必要的文件、设置弹出层参数及自定义样式等内容。

ThickBox运行需要的文件

官方下载：

Download thickbox.js or thickbox-compressed.js, ThickBox.css, and the loading graphic (loadingAnimation.gif) to your local machine (or cut and paste the code from the tabs). Along with these three files, a copy of thejQuery JavaScript library is needed. For this site, and ThickBox, I am using the compressed version of jQuery.

首先在 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="thickbox">打开一个页面a>

自定义设置：

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);去掉就可以取消掉

demo解释：http://www.blueidea.com/articleimg/2007/12/5182/tickbox_demo.html

出处：http://blog.youkuaiyun.com/dupeng0811/article/details/6239797