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 方法显示遮罩的更多相关文章

  1. jquery中页面Ajax方法$.load的功能

    load语法 $(".selector").load("url", function(responseText, statusText, xmlhttprequ ...

  2. easyui 中iframe嵌套页面，提示弹窗遮罩的解决方法，parent.$.messager.alert和parent.$.messager.confirm

    项目中用到easyui 布局,用到north,west,center三个区域,且在center中间区域嵌入iframe标签.在主内容区做一些小提示弹窗(例如删除前的弹窗提示确认)时,会遇到遮罩问题,由 ...

  3. C# 动态创建SQL数据库（二） 在.net core web项目中生成二维码 后台Post/Get 请求接口 方式 WebForm 页面ajax 请求后台页面 方法 实现输入框小数多 自动进位展示，编辑时实际值不变 快速掌握Gif动态图实现代码 C#处理和对接HTTP接口请求

    C# 动态创建SQL数据库(二) 使用Entity Framework  创建数据库与表 前面文章有说到使用SQL语句动态创建数据库与数据表,这次直接使用Entriy Framwork 的ORM对象关 ...

  4. 在子页面使用layer弹出层时只显示遮罩层,不显示弹出框问题

    最近子页面使用layer弹出层时只显示遮罩层,不显示弹出框,这个问题搞了很久,最后才发现,在子页面上使用弹出框时,如果只使用layer.alert()或者layer.open()时,会默认在当前页面弹 ...

  5. 重写ajax方法实现异步请求session过期时跳转登录页面

    jQuery(function($){ // 备份jquery的ajax方法 var _ajax=$.ajax; // 重写ajax方法, $.ajax=function(opt){ var _suc ...

  6. eclipse neon配置tomcat8无法显示默认页面解决方法

    下载对应tomcat8版本到本地后,在eclipse中添加tomcat8的对应目录,输入http://localhost:8080时无法显示tomcat的index.jsp页面(会显示404页面).原 ...

  7. 重写ajax方法实现特定情况下跳转登录页面

    jQuery(function($){ // 备份jquery的ajax方法 var _ajax=$.ajax; // 重写ajax方法, $.ajax=function(opt){ var _suc ...

  8. 利用来JS控制页面控件显示和隐藏有两种方法

    利用来JS控制页面控件显示和隐藏有两种方法,两种方法分别利用HTML的style中的两个属性,两种方法的不同之处在于控件隐藏后是否还在页面上占空位. 方法一:  1 2 document.getEle ...

  9. 重写ajax方法实现异步请求session过期时跳转登录页面（转）

    一般我们会在过滤器里判断登录状态,如果没登录就跳转登录页面,过滤器java核心代码如下: UserItem loginUser = (UserItem)request.getSession().get ...

随机推荐

  1. Linux vsftpd 无法登录 cannot change directory:xxx priv_sock_get_cmd 问题

    配置vsftpd时本地用户无法切换不能登录问题.问题如下: C:\Users\kai>ftp ftp> open 172.24.144.10 连接到 172.24.144.10. (vsF ...

  2. Scala中的If判断&While&For循环

    If 判断: object TestScalaIf { def main(args: Array[String]): Unit = { // val resutlt = judge1(-100) // ...

  3. IOS下视频监控项目总结

    一.项目说明 二.技术点 1.数据缓存 2.storyboard的使用 3.h264码流数据的解码 4.UDP通讯 三.解决方案 四.总结 五.相关资料

  4. sqlserver 公有表达式

    了解通用表达式: 为了让代码简洁:在一个查询中引用另外的结果集都是通过视图而不是子查询来进行分解,但是视图是系统级对象,如果数据集仅仅需要在存储过程或是自定义函数中使用一次的话,使用view有些奢侈哈 ...

  5. 两种查看eclipse或MyEclipse是64bit还是32bit的方法

    方法一: 对于:eclipse 打开eclipse后:Help-->About Eclipse-->Installation Details-->Configuration 如果看到 ...

  6. JAVA.IO流学习笔记

    一.java.io 的描述 通过数据流.序列化和文件系统提供系统输入和输出.IO流用来处理设备之间的数据传输 二.流 流是一个很形象的概念,当程序需要读取数据的时候,就会开启一个通向数据源的流,这个数 ...

  7. JS调用iframe方式实现Web区域打印页面内容

    1.程序说明 1) 此程序可以实现选择页面中的区域进行打印,以iframe方式进行打印: 2) 与原生态的print() 区别在于,取消打印页面后可以完整保留当前访问页面的内容. 2.代码部分 1) ...

  8. WCF学习笔记 -- 基本概念

    WCF是实现WebService的一种微软提出的技术,整合了.Remote, .NET及ASP.NET服务的一种框架.是Windows Communication Foundation的缩写.WebS ...

  9. 40个容易上瘾的HTML5网页游戏,总有一款适合你

    我记得姐姐家的孩子在刚刚才学会走路,说话还不能完整的时候就已经能自己用小手点出小游戏的网站来一个人自娱自乐.我一直在想这一代跟着计算机一起茁壮成长的孩子会不会也和美国那一代人一样,出现9岁的黑客和计算 ...

  10. java内部类的定义原则

    /*内部类的访问规则:1,内部类可以直接访问外部类中的成员,包括私有.    之所以可以直接访问外部类中的成员,是因为内部类中持有了一个外部类的引用,格式 外部类名.this2,外部类要访问内部类,必 ...