根据thickbox定制自己的遮罩层

 

 

Jquery有很多遮罩层插件，我使用了一款叫做thickbox的插件，效果很好。

但现在我要和后台交互，后台处理数据时间较长，为了提示用户，同时不让用户进行其他操作，这时候thickbox就不适用了，因为它允许用户自己关闭。

因为时间问题，不能再去研究其他插件了。索性自己看源码，修改一下即可。

thickbox文档和修改后的插件地址：https://files.cnblogs.com/china-li/ThickBox.zip

我现在要在遮罩层显示的是一个div，所以在thickbox.js中tb_show()方法的try块最后清除了遮罩层标题：

//不要头部title，清空
$('#TB_title').height(0).html('');

 

同时，当用户要关闭遮罩层的时候，会调用tb_remove()方法，我就把这个方法中的两行代码给注释了：

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 = "";
    return false;
}

 

但是要给外界留一个关闭遮罩层的接口，所以复制了这个方法，重新起名：

//留一个外部调用，用于关闭遮罩层
function tb_remove_external(){
    $("#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 = "";
    return false;
}

 

这样 ，在页面中，ajax交互完成后，会调用tb_remove_external()方法关闭遮罩层。实现了定制的thickbox。