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/ ...
随机推荐
- Android应用框架-Volley网络通信框架
1.Volley简介: Volley是Google 推出的 Android 异步网络请求框架和图片加载框架. 在 Google I/O 2013 大会上发布. 2.Volley特点 扩展性强. And ...
- CODEVS1049 棋盘染色
题目大意:01矩阵,1表示黑色,0表示白色,求将白色染成黑色最少的次数 使黑色成为一整个联通块. 题解: 搜索bfs 90... dfs判断连通 #include<iostream> #i ...
- 讲解JSP自定义标签
一.基本概念 1.标签(Tag) 标签是一种XML元素,通过标签可以使JSP网页变得简洁并且易于维护,还可以方便地实现同一个JSP文件支持多种语言版本.由于标签是XML元素,所以它的名称和属性都是大小 ...
- Fragment和FragmentActivity的使用
可以分为下面的几部分: 使用支持库 创建一个Fragment 创建一个动态UI 多个Fragment之间的通信 1.使用支持库 如果您的应用需要运行在3.0及以上的版本,可以忽略这部分内容. 如果您的 ...
- 【转】jmeter实践
目录(?)[-] Jmeter相关概念简介 应用实例 AbApacheBench对比 本文主要介绍性能测试中的常用工具jmeter的使用方式,以方便开发人员在自测过程中就能自己动手对系统进行自动压测和 ...
- Effective java笔记2--创建于销毁对象
一.创建对象的两种方式 1.提供公有的构造器. 2.提供一个返回类实例的静态方法. 二.使用静态方法创建对象 优势: 1.静态工厂方法的一个好处是,与构造函数不同,静态工厂方法具有名字.产生的客户端代 ...
- Avro之二:入门demo
一.使用avro-maven插件为avsc文件生成对应的java类: 在项目的pom.xml中增加依赖及插件如下: <dependency> <groupId>org.apac ...
- mysql特性及部署规范
--分支版本,mysql对cpu,内存,io子系统资源利用特点--oracle mysql,mariadb,percona server--部署规范建议,系统安装,mysql安装,其他规范互联网业务为 ...
- String to Integer (atoi) ???
#define INT_MAX 2147483647 #define INT_MIN -2147483648 class Solution { public: int atoi(const char ...
- python与桶排序
问题提出: 将以下数据: 6, 8, 2, 3, 4, 0, 9, 1, 5,1 按从小到达排列. 桶排序原理: 桶排序也叫计数排序,简单来说,就是将数据集里面所有元素按顺序列举出来,然后统计元素出现 ...