html 页面 ajax 方法显示遮罩
showLoading.css 样式:
*{margin:;padding:;list-style-type:none;}
a,img{border:;}
.overlay{position:fixed;top:;right:;bottom:;left:;z-index:;width:100%;height:100%;_padding:0 50% 0 0;background:#333333;display:none;}
.showbox{position:fixed;top:;left:50%;z-index:;opacity:;filter:alpha(opacity=0);margin-left:-80px;}
*html,*html body{background-image:url(about:blank);background-attachment:fixed;}
*html .showbox,*html .overlay{position:absolute;top:expression(eval(document.documentElement.scrollTop));}
#AjaxLoading{color:#37a;font-size:12px;font-weight:bold;}
/*#AjaxLoading div.loadingWord{width:300px;height:50px;line-height:50px;border:0px solid #000000;background:#65eae6;}*/
#AjaxLoading div.loadingWord{}
#AjaxLoading img{margin:10px 15px;float:left;display:inline;}
html 代码,辅助两个div
<body>
<!--遮罩 开始-->
<div class="overlay"></div>
<div id="AjaxLoading" class="showbox">
<div class="loadingWord"><img src="/resource/jQuery.showLoading/images/loading2.gif" /></div>
</div>
<!--遮罩 结束-->
</body>
JS代码
<script type="text/javascript"> //----判断当前页面是否加载状态 开始 ----
document.onreadystatechange = subSomething;//当页面加载状态改变的时候执行这个方法.
function subSomething() {
if (document.readyState != 'complete') //当页面加载状态
{
//----显示遮罩 开始----
$(".overlay").css({ 'display': 'block', 'opacity': '0.8' });
$(".showbox").stop(true).animate({ 'margin-top': '300px', 'opacity': '1' }, 200);
$('#AjaxLoading').show()
//----显示遮罩 结束----
}
}
//----判断当前页面是否加载状态 结束 ----
$(function () {
jQuery.ajax({
url: 'test.ashx',
type: "POST",
dataType: "json",
data: { "cptypeid": cptypeid, "cpnameid": cpnameid },
success: function (result) {
if (result.success) { }
//----隐藏遮罩 开始----
$(".showbox").stop(true).animate({ 'margin-top': '250px', 'opacity': '0' }, 400);
$(".overlay").css({ 'display': 'none', 'opacity': '0' });
$('#AjaxLoading').hide()
//----隐藏遮罩 结束----
} })
})
</script>
html 页面 ajax 方法显示遮罩的更多相关文章
- jquery中页面Ajax方法$.load的功能
load语法 $(".selector").load("url", function(responseText, statusText, xmlhttprequ ...
- easyui 中iframe嵌套页面,提示弹窗遮罩的解决方法,parent.$.messager.alert和parent.$.messager.confirm
项目中用到easyui 布局,用到north,west,center三个区域,且在center中间区域嵌入iframe标签.在主内容区做一些小提示弹窗(例如删除前的弹窗提示确认)时,会遇到遮罩问题,由 ...
- C# 动态创建SQL数据库(二) 在.net core web项目中生成二维码 后台Post/Get 请求接口 方式 WebForm 页面ajax 请求后台页面 方法 实现输入框小数多 自动进位展示,编辑时实际值不变 快速掌握Gif动态图实现代码 C#处理和对接HTTP接口请求
C# 动态创建SQL数据库(二) 使用Entity Framework 创建数据库与表 前面文章有说到使用SQL语句动态创建数据库与数据表,这次直接使用Entriy Framwork 的ORM对象关 ...
- 在子页面使用layer弹出层时只显示遮罩层,不显示弹出框问题
最近子页面使用layer弹出层时只显示遮罩层,不显示弹出框,这个问题搞了很久,最后才发现,在子页面上使用弹出框时,如果只使用layer.alert()或者layer.open()时,会默认在当前页面弹 ...
- 重写ajax方法实现异步请求session过期时跳转登录页面
jQuery(function($){ // 备份jquery的ajax方法 var _ajax=$.ajax; // 重写ajax方法, $.ajax=function(opt){ var _suc ...
- eclipse neon配置tomcat8无法显示默认页面解决方法
下载对应tomcat8版本到本地后,在eclipse中添加tomcat8的对应目录,输入http://localhost:8080时无法显示tomcat的index.jsp页面(会显示404页面).原 ...
- 重写ajax方法实现特定情况下跳转登录页面
jQuery(function($){ // 备份jquery的ajax方法 var _ajax=$.ajax; // 重写ajax方法, $.ajax=function(opt){ var _suc ...
- 利用来JS控制页面控件显示和隐藏有两种方法
利用来JS控制页面控件显示和隐藏有两种方法,两种方法分别利用HTML的style中的两个属性,两种方法的不同之处在于控件隐藏后是否还在页面上占空位. 方法一: 1 2 document.getEle ...
- 重写ajax方法实现异步请求session过期时跳转登录页面(转)
一般我们会在过滤器里判断登录状态,如果没登录就跳转登录页面,过滤器java核心代码如下: UserItem loginUser = (UserItem)request.getSession().get ...
随机推荐
- Visual Studio Team Foundation Server 2015(TFS 秘钥、序列号)
Visual Studio Team Foundation Server 2015 序列号:PTBNK-HVGCM-HB2GW-MXWMH-T3BJQ
- SQL Server 2005中约束
在SQL Server 2005中有6种约束:主键约束(primary key constraint).惟一性约束(unique constraint).检查约束(check constraint). ...
- sublime text修改TAB缩进为空格
在sublime text中将TAB缩进直接转化为4个空格,可以按照如下方式操作: 菜单栏: Preferences -> Settings – More -> Syntax Specif ...
- Git - Download for Linux and Unix
It is easiest to install Git on Linux using the preferred package manager of your Linux distribution ...
- Yii zii.widgets.grid 隐藏列 方便js获取隐藏值
array( 'name' => $data->is_audit, 'value' => '$data->is_audit', 'headerHtmlOptions' => ...
- 利用google api生成二维码名片例子
二维条码/二维码可以分为堆叠式/行排式二维条码和矩阵式二维条码.堆叠式/行排式二维条码形态上是由多行短截的一维条码堆叠而成:矩阵式二维条码以矩阵的形式组成,在矩阵相应元素位置上用“点”表示二进制“1” ...
- .net chart(图表)控件的使用-System.Windows.Forms.DataVisualization.dll
这个案例指在介绍微软这套免费又功能强大的图表控件Microsoft Chart Controls for Microsoft .NET Framework 3.5,通过它,可让您的项目及报表,轻松套用 ...
- js 验证电话号 座机及手机号
function CheckTel() { /*验证电话号码 验证规则:区号+号码,区号以0开头,3位或4位号码由7位或8位数字组成 区号与号码之间可以无连接符,也可以“-”连接 如010888888 ...
- OC2-重写
// // Dog.h // OC2-重写 // // Created by qianfeng on 15/6/17. // Copyright (c) 2015年 qianfeng. All rig ...
- swift基础知识学习
用let来声明常量,用var来声明变量 声明变量: var x = 0.0, y = 0.0, z = 0.0 var welcomeMessage: String 常量和变量的命名 你可以用任何 ...