经典JS函数thickbox的使用-关闭刷新或无刷新

经典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" onclick="self.parent.tb_remove();"/>(这句是关闭用框架弹出的窗口,tb_remove函数不含那句蓝色的,关闭就不刷新了)

<input type="button" value="确定" title="确定" class="button" onclick="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


历史上的今天:


阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页