根据thickbox定制自己的遮罩层

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定制自己的遮罩层相关推荐

css 定位及遮罩层小技巧
relative定位:相对它自己的正常位置的定位. fixed定位:fixed定位是指元素的位置相对于浏览器窗口是固定位置,即使窗口是滚动的它也不会滚动,且fixed定位使元素的位置与文档流无关,因此 ...
[微信小程序]实现一个自定义遮罩层组件(完整示例代码附效果图)
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 正文: 先上效果图: 点击按钮Show显示遮罩层,再次点击屏幕任何地方隐藏遮罩层; <button bi ...
半透明遮罩层覆盖整个可视区域
我们经常会遇到点击一个按钮弹出一个对话框和一个变暗的遮罩层,简单的写法只能让遮罩层覆盖浏览器的大小,那么怎么让遮罩层覆盖全部区域呢? css代码如下: 1 html,body { 2 height: ...
浮层java_通过遮罩层实现浮层DIV登录的js代码
摘要:这篇JavaScript栏目下的"通过遮罩层实现浮层DIV登录的js代码",介绍的技术点是"浮层DIV.JS代码.div.遮罩层.登录.代码",希望对大家 ...
C#实现Winform自定义半透明遮罩层
在网页中通过div+css实现半透明效果不难,今天我们看看一种在winfrom中实现的方法: 效果图如下,正常时: 显示遮罩层时: 自定义遮罩层控件的源码如下: View Code using Sys ...
怎么写遮罩层 css,css案例 - mask遮罩层的华丽写法
mask遮罩蒙层使用通常的写法的bug 通常写法pug .mask 通常写法css .mask{ position: absolute; top: 0; right: 0; bottom: 0; le ...
fancybox 在打开窗口前先执行 js脚本,fancybox设置只能通过右上角关闭,fancybox遮罩层关闭...
在默认情况下,fancybox点击之后弹出窗口,右上角带有一个XX,但是点击窗口的其他遮罩层或者是其他地方,都是可以关闭fancybox的,有些时候,我们不希望这样关闭,而是只能点击右上角关闭,那么设 ...
css3遮罩层_CSS3鼠标hover图片超酷遮罩层动画特效
这是一款CSS3鼠标hover图片超酷遮罩层动画特效.该特效中,当鼠标悬停在图片上面的时候,左右两个遮罩层会向中间收缩,最后合成一个完整的遮罩层.效果截图如下: HTML代码 Williamson ...
关于遮罩层无效的记录
原本想做一个没有颜色的透明DIV遮罩层,可是添加之后在IE下没有效果. (火狐和Chrome我没试.)被遮住的元素仍能点击. 于是乎,单独把这一块拿出来做了一个小例子.下意识的加了背景颜色.立马有了效 ...

根据thickbox定制自己的遮罩层

根据thickbox定制自己的遮罩层相关推荐

最新文章

热门文章