//调用方法

//关闭事件<button onclick='LayerHide()'>关闭</button>,在loadDiv(text)中,剔除出来

//调用LayerShow(text),text为参数,可以写入想要写入的提示语

//本方法在调用时会自动生成一个添加到body的div,并且会在调用隐藏遮罩层 LayerHide()时删除div

//封装遮罩层div显示效果

//将其放在页面的div中加载

function loadDiv(text) {
var div = "<div id='_layer_'> "
+ "<div id='_MaskLayer_' "
+ "style='filter: alpha(opacity=30); -moz-opacity: 0.3; opacity: 0.3;"
+ "background-color: #000; width: 100%; height: 100%; z-index: 1000; "
+ "position: absolute;"
+ "left: 0; top: 0; overflow: hidden; display: none'>"
+ "</div><div id='_wait_' style='z-index: 1005; position: absolute; "
+ "width:430px;height:218px; display: none' ><center><h3>"
+ "" + text
+ "<img src='../images/loading.gif' /></h3>"
+ "<button onclick='LayerHide()'>关闭</button></center></div></div>";
return div;
}

//触发遮罩层

function LayerShow(text) {
var addDiv = loadDiv(text);
var element = $("#" + addDiv).appendTo(document.body);
$(window).resize(Position);
var deHeight = $(document).height();
var deWidth = $(document).width();
Position();
$("#_MaskLayer_").show();
$("#_wait_").show();
}

//获取相对位置

function Position() {
$("#_MaskLayer_").width($(document).width());
var deHeight = $(window).height();
var deWidth = $(window).width();
$("#_wait_").css({
  left : (deWidth - $("#_wait_").width()) / 2 + "px",
top : (deHeight - $("#_wait_").height()) / 2 + "px"
});
}

//隐藏遮罩层

function LayerHide() {
$("#_MaskLayer_").hide();
$("#_wait_").hide();
del();
}

//清空div,避免产生重复

function del() {
  var delDiv = document.getElementById("_layer_");
delDiv.parentNode.removeChild(delDiv);
//删除
}

本文转自:http://www.cnblogs.com/WangJinYang/archive/2012/10/09/2716965.html

js 遮罩层 loading 效果的更多相关文章

  1. Adobe Edge Animate –地球自转动画的实现,类似flash遮罩层的效果

    Adobe Edge Animate –地球自转动画的实现,类似flash遮罩层的效果 版权声明: 本文版权属于 北京联友天下科技发展有限公司. 转载的时候请注明版权和原文地址. 目前Edge的功能尚 ...

  2. js遮罩层弹出显示效果组件化

    1.在web开发中经常遇到遮罩层的效果,可以将这种常用方法通用化 function showid(idname){ var isIE = (document.all) ? true : false; ...

  3. JS遮罩层弹框效果

    对于前端开发者来说,js是不可缺少的语言.现在我开始把我日常积累的一些js效果或者通过搜索自己总结的一些效果分享给大家,希望能够帮助大家一起进步,也希望大家能够多多支持! 1.今天我先分享一个遮罩层弹 ...

  4. html js 遮罩层

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

  5. jQuery演示8种不同的图片遮罩层动画效果

    效果预览 下载地址 jQuery插件大全 实例代码 <div class="container"> <h1>jQuery图标和文章动画效果</h1&g ...

  6. 纯css实现蒙层loading效果

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

  7. JS遮罩层

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  8. js 遮罩层请稍后

    this.WaitMessage = function (msg) { $("<div class=\"datagrid-mask\"></div> ...

  9. 使用CSS3的box-shadow实现双透明遮罩层对话框

    box-shadow介绍 在我之前的一篇文章<从天猫和支付宝身上学习opcity与rgba>中,介绍了实现双透明遮罩层效果的两种方法,分别是opacity和rgba.他们需要分别依赖于不同 ...

随机推荐

  1. 手机访问 localhost

    为了测试开发的手机网站,常常需要使手机直接访问本地网络.在这个过程中碰到几个问题,记下来供以后参考 1. 在本地主机运行apache后,使用localhost和127.0.0.1可以访问页面,但使用I ...

  2. 连接SQL Server执行SQL语句

    public static DataTable GetData() { string Connect = ConfigurationManager.AppSettings["Connecti ...

  3. 深入分析JavaWeb 技术内幕

    1,通过浏览器请求一个资源,会发生以下几种过程 1) http的解析过程,包括对于http请求头和响应头中指令(控制用户浏览器的渲染行为和 服务器的执行逻辑)的解析 2)DNS的解析过程(根据域名获取 ...

  4. Redis主从自动failover

    Redis主从架构持久化存在一个问题,即前次测试的结论,持久化需要配置在主实例上才能跨越实例保证数据不丢失,这样以来主实例在持久化数据到硬 盘的过程中,势必会造成磁盘的I/O等待,经过实际测试,这个持 ...

  5. SQLServer批量创建有规则的数据

    根据需求要生成从kkk001,kkk002开始的100个递增账号 手插要死人的,用SQL脚本轻松完成: declare @a int ) ) begin ) ) end declare:申明变量, @ ...

  6. java Clone使用方法详解

    java"指针"       Java语言的一个优点就是取消了指针的概念,但也导致了许多程序员在编程中常常忽略了对象与引用的区别,本文会试图澄清这一概念.并且由于Java不能 通过 ...

  7. 【spring 后台跳转前台】使用ajax访问的后台,后台正常执行,返回数据,但是不能进入前台的ajax回调函数中

    问题: 使用ajax访问的后台,后台正常执行,并且正常返回数据,但是不能进入前台的ajax回调函数中 问题展示:  问题解决: 最后发现是因为后台的方法并未加注解:@ResponseBody,导致方法 ...

  8. 【转】Kylin中的cube构建

    http://blog.csdn.net/yu616568/article/details/50365240 前言   在使用Kylin的时候,最重要的一步就是创建cube的模型定义,即指定度量和维度 ...

  9. BZOJ 3932 [CQOI2015]任务查询系统 ——可持久化线段树

    [题目分析] 主席树,维护区间大小以及权值之和. 但是细节确实要琢磨很久,WA了几次. [代码] #include <cstdio> #include <cstring> #i ...

  10. Y86模拟器安装

    Y86模拟器安装 这周需要学习Y86下的指令集开发,Y86和x86可以说是孪生兄弟,但是还是存在着一些小的差别.接下来介绍如何进行linux-debian平台下的Y86模拟器安装. 虚拟机VMware ...