(function () {
//遮罩层实现 zhe zhao ceng kexb 2016.2.24
$.extend($.fn, {
mask: function (msg, maskDivClass) {
this.unmask();
// 参数
var op = {
opacity: 0.8,
z: ,
bgcolor: '#ccc'
};
var original = $(document.body);
var position = { top: , left: };
if (this[] && this[] !== window.document) {
original = this;
position = original.position();
}
// 创建一个 Mask 层,追加到对象中
var maskDiv = $('<div class="maskdivgen">&nbsp;</div>');
maskDiv.appendTo(original);
var maskWidth = original.outerWidth();
if (!maskWidth) {
maskWidth = original.width();
}
var maskHeight = original.outerHeight();
if (!maskHeight) {
maskHeight = original.height();
}
maskDiv.css({
position: 'absolute',
top: position.top,
left: position.left,
'z-index': op.z,
width: "100%",//maskWidth,
height:"30%", //maskHeight,
'background-color': op.bgcolor,
opacity:
});
if (maskDivClass) {
maskDiv.addClass(maskDivClass);
}
if (msg) {
var msgDiv = $('<div style="position:absolute;border:#6593cf 1px solid; padding:2px;background:#ccca"><div style="line-height:24px;border:#a3bad9 1px solid;background:white;padding:2px 10px 2px 10px">' + msg + '</div></div>');
msgDiv.appendTo(maskDiv);
var widthspace = (maskDiv.width() - msgDiv.width());
var heightspace = (maskDiv.height() - msgDiv.height());
msgDiv.css({
cursor: 'wait',
top: (heightspace / - ),
left: (widthspace / - )
});
}
maskDiv.fadeIn('fast', function () {
// 淡入淡出效果
$(this).fadeTo('slow', op.opacity);
})
return maskDiv;
},
unmask: function () {
var original = $(document.body);
if (this[] && this[] !== window.document) {
original = $(this[]);
}
original.find("> div.maskdivgen").fadeOut('slow', , function () {
$(this).remove();
});
}
});
})();

jquery遮罩层的更多相关文章

  1. jQuery遮罩层登录对话框

    用户登录是许多网站必备的功能.有一种方式就是不管在网站的哪个页面,点击登录按钮就会弹出一个遮罩层,显示用户登录的对话框.这用方式比较灵活方便.而现在扫描二维码登录的方式也是很常见,例如QQ.微信.百度 ...

  2. jQuery遮罩层的实现

    遮罩层其实就是一个占据整个页面的半透明效果的页面元素,一般用div实现.页面中实现遮罩层,无非就是为了让用户只能操作弹出窗口的内容,而不允许操作弹出窗口外的内容. 在实现时,我使用了两个div,一个遮 ...

  3. jQuery遮罩层插件

    在网页上常常遇到须要等待非常久的操作,比方导出报表等.为了预防用户点击其它操作或者多次点击同个功能,须要用遮罩层把页面或者操作区盖住.防止用户进行下一步操作.同一时候能够提高界面友好度,让用户知道操作 ...

  4. jquery 遮罩层显示img

    如果点击iframe中的image显示整个页面的遮罩层,可参考如下: http://blog.csdn.net/shiaijuan1/article/details/70160714 具体思路就是,顶 ...

  5. jQuery遮罩层效果

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  6. JQuery 遮罩层弹窗

    var str = "<div id=\"zhezhao\" style=\"display:none; background-color: rgba(0 ...

  7. jquery 遮罩层指定位置

    .css .datagrid-mask-msg { position: absolute; top: %; margin-top: -20px; padding: 12px 5px 10px 30px ...

  8. Jquery实现遮罩层,就是弹出DIV周围都灰色不能操作

    <%@ page language="java" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC & ...

  9. jquery实现div遮罩层

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. ubuntu下访问支付宝官网,安装安全控件

    (1)根据支付宝提示下载安装控件的压缩包 aliedit.tar.gz (2)解压安装 (3)重启浏览器就可以了

  2. yarn  workspace 开发示例

    此为官方示例: package.json { "private": true, "workspaces": [ "workspace-a", ...

  3. composer 详解

    composer 详解 http://blog.csdn.net/panpan639944806/article/details/16808261 https://www.phpcomposer.co ...

  4. Vue.js:条件与循环

    ylbtech-Vue.js:条件与循环 1.返回顶部 1. Vue.js 条件与循环 条件判断 v-if 条件判断使用 v-if 指令: v-if 指令 在元素 和 template 中使用 v-i ...

  5. PHP统计排行,分页

    1.分页参数 count 总数 firstRow   起始行 listRows   每一次获取记录数 list          每一页的记录(要与count对应一致就行) 2.分页对象 可以针对真实 ...

  6. 学习 altera官网 之 timequest

    1.如果启动沿(launch)和锁存沿(latch)是同一时钟域则,latch比launch晚一个时钟周期. 2.数据到达时间 3.时钟到达时间.如果启动沿(launch edge)和锁存沿(latc ...

  7. requests的响应返回值显示content和text方法的区别

    requests的get或者post请求,返回的响应response获取方法:content和text content用于获取图片,返回二进制数据 text用于获取内容,返回的是unicode解码字符 ...

  8. python's twenty eithth day for me 模块和包

    模块: 什么是模块: 常见的场景:一个模块就是一个包含了python定义和声明的文件,文件名就是模块名字加上.py的后缀,但其实import加载的模块分为四个通用类别: 1,使用python编写的代码 ...

  9. EF中新建表和关联表的方法

    以机场表为例 private static AIRPORT_HELIPORTManager AirportHeliportManager => ManagerFactory.Instance.A ...

  10. Mybites和hibernate的优缺点和区别2

    Hibernate与MyBatis都可以是通过SessionFactoryBuider由XML配置文件生成SessionFactory,然后由SessionFactory 生成Session,最后由S ...