经典JS函数thickbox的使用-关闭刷新或无刷新
版权声明:转载时请以超链接形式标明文章原始出处和作者信息及本声明
http://jayle.blogbus.com/logs/38216523.html
这是个经典的JS,具体的样子,搜索thickbox网上多多的。今天用的时候想让其关闭时候刷新父窗口,但找了好久都没找到,我下的是别人汉化过的版本。后来我又下了英文版的,发现关闭时候是刷新父窗口的。
正好,我要用的也不能确定关闭是刷新或不刷新,原因很明显,如果弹出窗口是用户进行编辑或添加的话。用户对其进行了修改,那么关闭时候刷新下自然就可以看到新的内容了。但是用户仅仅是打开了这个弹出窗,而没有进行任何操作就关闭了,那么这个时候再刷新父窗口显然是多此一举,毕竟刷新是要有时间的,而无刷新关闭可以节省下这部分时间,对用户体验肯定是有益无害的。
最重要的是这部分函数,就是关闭的函数
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;
}
蓝色的部分如果有,关闭就刷新。于是再弄一个函数,和这个函数的差别就仅在于有无蓝色那句。并且根据实际情况调用关闭函数,这样就可以保障适合的关闭方法了。
比如, <input type="button" value="取 消" title="取消" class="button" οnclick="self.parent.tb_remove();"/>(这句是关闭用框架弹出的窗口,tb_remove函数不含那句蓝色的,关闭就不刷新了)
<input type="button" value="确定" title="确定" class="button" οnclick="self.parent.tb_reshmove();"/>(显示是进行操作的,那么新添加的函数tb_reshmove就含有蓝色那句,这样就可以刷新父窗口关闭了)
另外,在网上搜索的时候看到一个这样的改法,弹出窗显示图片时候点击背景关闭,如果不想点击背景关闭,只是点击 关闭按钮或链接才关闭,去掉下面的
if (typeof document.body.style.maxHeight === "undefined") {//if IE 6
$("body","html").css({height: "100%", width: "100%"});
$("html").css("overflow","hidden");
if (document.getElementById("TB_HideSelect") === null) {//iframe to hide select elements in ie6
$("body").append("<iframe id='TB_HideSelect'></iframe><div id='TB_overlay'></div><div id='TB_window'></div>");
$("#TB_overlay").click(tb_remove);
}
}else{//all others
if(document.getElementById("TB_overlay") === null){
$("body").append("<div id='TB_overlay'></div><div id='TB_window'></div>");
$("#TB_overlay").click(tb_remove);
}
}
thickbox代码在蓝色理想 可以看到显示和下载
演示:http://www.blueidea.com/articleimg/2007/12/5182/tickbox_demo.html
下载:http://www.blueidea.com/download/product/2007/5182.asp