?

?

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

但現在我要和后臺交互，后臺處理數據時間較長，為了提示用戶，同時不讓用戶進行其他操作，這時候thickbox就不適用了，因為它允許用戶自己關閉。

因為時間問題，不能再去研究其他插件了。索性自己看源碼，修改一下即可。

thickbox文檔和修改后的插件地址：http://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。

?

?

?

?

轉載于:https://www.cnblogs.com/china-li/archive/2012/12/18/2823113.html

總結

以上是生活随笔為你收集整理的根据thickbox定制自己的遮罩层的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。