《Jquery插件Thickbox的使用总结及自定义设置.docx》由会员分享，可在线阅读，更多相关《Jquery插件Thickbox的使用总结及自定义设置.docx（4页珍藏版）》请在三一办公上搜索。
1、Jquery插件Thickbox的使用总结及自定义设置Jquery插件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 the jQuer
2、y JavaScript library is needed. For this site, and ThickBox, I am using thecompressed version of jQuery. 首先在 HTML 文件的 head中导入jquery.js 和thickbox.js文件，导入 thickbox.css 文件;并且jquery.js 文件放在前面： 最后你只要给元素添加 class=”thickbox” 属性就可以开始用 thickbox 实现了一张图片的弹出展示功能： /只需要指定图片的class为thickbox 弹出框使用方法： ahref=Default.as
3、px?keepThis=true&TB_iframe=true&height=400&width=500title=主页class=thickbox inputonclick=/bannedUserList!unBannedUserList?height=400&width=800&inlineId=myOnPageContenttitle=弹出层class=thickboxtype=buttonvalue=Ban Another/ /内嵌内容 显示隐藏内容a /遮罩层 URL后面加?KeepThis=true&TB_iframe=true&height=400&width=600 参数字符串
4、中加 modal=true ?KeepThis=true&TB_iframe=true&height=400&width=600&modal=true 这样当关闭ThickBox时会调用ThickBoxiframe (self.parent.tb_remove)内部的一个tb_remove函数 所有其他参数字符都必须在TB_iframe参数之前。URL中所有TB 之后的将被移除。 打开一个页面 打开一个页面 打开一个页面 自定义设置： 1、弹出窗口(div)右上角的关闭按钮为显示为close or esc key，而不是中文的; 如果想把它变成X或关闭应该怎么来办呢？ 将thickbox.js
5、文件打开，查找关键字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
6、; 4、关闭层刷新父页面,修改关闭方法 ： functiontb_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 (typeofdocument.body.style.maxHeight = undefined) /if IE
7、6 $(body,html).css(height: auto, width: auto); document.onkeydown = ; document.onkeyup = ; /刷新父页面，未指定 window.location.reload; returnfalse; $(html).css(overflow,); 5、thickbox插件默认情况是点击灰色的遮罩层就会关闭取消 把两个$(#TB_overlay).click(tb_remove);去掉就可以取消掉 6、updatepanel回发后thickbox失效的解决方法 只需把以下代码粘贴至页面中就OK了。 functionpageLoad varisAsyncPostback = Sys.WebForms.PageRequestManager.getInstance.get_isInAsyncPostBack; if (isAsyncPostback) tb_init(a.thickbox, area.thickbox, input.thickbox);
