jquery遮罩层
(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"> </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遮罩层的更多相关文章
- jQuery遮罩层登录对话框
用户登录是许多网站必备的功能.有一种方式就是不管在网站的哪个页面,点击登录按钮就会弹出一个遮罩层,显示用户登录的对话框.这用方式比较灵活方便.而现在扫描二维码登录的方式也是很常见,例如QQ.微信.百度 ...
- jQuery遮罩层的实现
遮罩层其实就是一个占据整个页面的半透明效果的页面元素,一般用div实现.页面中实现遮罩层,无非就是为了让用户只能操作弹出窗口的内容,而不允许操作弹出窗口外的内容. 在实现时,我使用了两个div,一个遮 ...
- jQuery遮罩层插件
在网页上常常遇到须要等待非常久的操作,比方导出报表等.为了预防用户点击其它操作或者多次点击同个功能,须要用遮罩层把页面或者操作区盖住.防止用户进行下一步操作.同一时候能够提高界面友好度,让用户知道操作 ...
- jquery 遮罩层显示img
如果点击iframe中的image显示整个页面的遮罩层,可参考如下: http://blog.csdn.net/shiaijuan1/article/details/70160714 具体思路就是,顶 ...
- jQuery遮罩层效果
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- JQuery 遮罩层弹窗
var str = "<div id=\"zhezhao\" style=\"display:none; background-color: rgba(0 ...
- jquery 遮罩层指定位置
.css .datagrid-mask-msg { position: absolute; top: %; margin-top: -20px; padding: 12px 5px 10px 30px ...
- Jquery实现遮罩层,就是弹出DIV周围都灰色不能操作
<%@ page language="java" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC & ...
- jquery实现div遮罩层
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- Visual Studio 常用快捷键(一)
最近看到很多同事用 VI 来开发Ruby,Python脚本. 编辑代码全部用的是快捷键,效率很高. 其实Visual Stuido也有非常多的快捷键,熟练运用后,能大大提高工作效率. 本文介绍一些最常 ...
- 深入学习Web Service系列----异步开发模式
概述 在本篇随笔中,通过一些简单的示例来说一下Web Service中的异步调用模式.调用Web Service方法有两种方式,同步调用和异步调用.同步调用是程序继续执行前等候调用的完成,而异步调用在 ...
- laravel中有条件使用where
在项目开发的过程中;有时候会有多个参数 去用在where查询中;那么这里的where语句是可能有也可能没有的 1.用原生的mysql语句来实现 private function getData($ty ...
- log4net内部调试开启
最近用log4net写入日志到mysql数据库,死活写不进去,就想能不能看log4net的错误记录,在网上一找,还真有:开启log4net的内部调试,作个记录: <appSettings> ...
- 【转】使用JMeter 完成常用的压力测试(二)
使用JMeter 完成常用的压力测试 Login.jsp 和welcome.jsp.其中 login.jsp 负责生成 User 对象,并调用 User 的login.当 login 返回为 true ...
- java多线程实现每隔500毫秒输出一个数字
总结:主要是利用多线程来进行控制它输出的速度,而且这里要处理异常,这个异常我是这样处理的 1.首先写完一个for循环后,写这个:Thread.currnetThread().sleep(500); 然 ...
- AngularJS:Service
ylbtech-AngularJS:Service 1.返回顶部 1. AngularJS 服务(Service) AngularJS 中你可以创建自己的服务,或使用内建服务. 什么是服务? 在 An ...
- vue-cli+webpack项目 修改项目名称
使用vue-cli+webpack创建的项目,修改文件名称或者更改文件的位置,运营时会报错,是因为npm项目,在安装依赖(node_nodules)时,会记录当前的文件路径,当修改之后就无法正常启动. ...
- 分析java类的静态成员变量初始化先于非静态成员变量
依上图中当class字节码文件被jvm虚拟机加载到内存中依次经过 连接 验证:对字节码进行验证 准备:给静态变量分配内存并赋予变量类型各自的默认值(注:基本类型为0或false,对象为null,sta ...
- python对裤子进行一个查询
前言: 获取到一个数据库,使用python对其 进简单的查询 代码: import time print('开房记录查询') def chax(): g=input('请输入要查询的>>& ...