文档章节

ajax遮罩层

messud4312
 messud4312
发布于 2015/08/19 14:43
字数 195
阅读 153
收藏 8

遮罩层2种方式:

  • 引入jquery插件模式

  • 1. 下载 showLoading.css , jquery.showLoading.min.js  两个文件

    2. 引入这2个文件

    <link href="style/showLoading.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="js/jquery.showLoading.min.js"></script>

    3. 使用这个组件

    function showloading(url,data){
      $("body").showLoading();
      $.ajax({
        url:url,
        data:data,
        dataType:"json",
        success:function(obj){
          $("body").hideLoading();
        }
      });
    }
  • css+div模式

        1. css样式

<style type="text/css">
    #loading-mask{
        position:absolute;
        left:0px;
        top:0px;
        width:100%;
        height:100%;
        z-index:1000;
	background: #666666 url("/static/images/ui-bg_diagonals-thick_20_666666_40x40.png") 50% 50% repeat;
	opacity: 0.5;
        -moz-opacity:0.5;
	filter: Alpha(Opacity=50);
    }
    #loading{
        position:absolute;
        left:45%;
        top:40%;
        padding:2px;
        z-index:1001;
        height:auto;
 }
    #loading .loading-indicator{
        color:#444;
        font:bold 20px tahoma,arial,helvetica;
        padding:10px;
        margin:0;
        height:auto;
    }
    #loading-msg {
        font: normal 18px arial,tahoma,sans-serif;
    }
</style>

        2. html部分

<div id='loading-mask'></div>
<div id="loading">
    <div class="loading-indicator">
       <img src="/static/images/ajax-loader.gif" width="16" height="11" style="margin-right:8px;float:left;vertical-align:top;"/> 
    </div>
</div>


© 著作权归作者所有

messud4312
粉丝 6
博文 154
码字总数 115310
作品 0
海淀
后端工程师
私信 提问
jquery mobile 手机AJAX访问后台时遮罩层解决方案

求教jquery mobile 手机AJAX访问后台时遮罩层解决方案。最近在做这个,用到了AJAX去后台逐步取数据,类似校内微博那种逐步取N条评论的效果。但有个问题,就是在用AJAX调后台时,页面没有反馈...

hanyuekidd
2012/05/24
3.1K
1
bootstrap模态框hide遮罩层不隐藏解决办法

问题:在使用ajax提交模态框表单数据后,隐藏模态框并局部刷新,导致遮罩层不消失 原因:模态框隐藏并局部刷新,导致在hide方法没执行完成时已经局部刷新,没有隐藏掉遮罩层 解决办法: 方法...

dongfeng012
2018/05/16
0
0
Jquery超简单遮罩层实现代码

1.样式如下设置: CSS代码: <style type="text/css"> dialog{ z-index: 999; position: absolute; display: none; } mask { position: absolute; top: 0px; filter: alpha(opacity=60); bac......

~少司命~
2015/09/07
243
0
【jquery】fancybox 是一款优秀的 jquery 弹出层展示插件

今天给大家分享一款优秀的 jquery 弹出层展示插件 fancybox。它除了能够展示图片之外,还可以展示 flash、iframe 内容、html 文本以及 ajax 调用,我们可以通过 css 来自定义外观。 fancybox...

chaun
2015/05/27
203
0
jQuery Fancybox插件使用参数详解

今天给大家介绍的jquery图片播放插件叫Fancybox,相比LightBox来说,Fancybox相对庞大点,配置也更丰富一些,相信你会喜欢的。 Fancybox的项目主页地址:http://fancybox.net/ Fancybox的特点...

欣儿
2014/04/18
3.9K
0

没有更多内容

加载失败,请刷新页面

加载更多

java通过ServerSocket与Socket实现通信

首先说一下ServerSocket与Socket. 1.ServerSocket ServerSocket是用来监听客户端Socket连接的类,如果没有连接会一直处于等待状态. ServetSocket有三个构造方法: (1) ServerSocket(int port);...

Blueeeeeee
今天
6
0
用 Sphinx 搭建博客时,如何自定义插件?

之前有不少同学看过我的个人博客(http://python-online.cn),也根据我写的教程完成了自己个人站点的搭建。 点此:使用 Python 30分钟 教你快速搭建一个博客 为防有的同学不清楚 Sphinx ,这...

王炳明
昨天
5
0
黑客之道-40本书籍助你快速入门黑客技术免费下载

场景 黑客是一个中文词语,皆源自英文hacker,随着灰鸽子的出现,灰鸽子成为了很多假借黑客名义控制他人电脑的黑客技术,于是出现了“骇客”与"黑客"分家。2012年电影频道节目中心出品的电影...

badaoliumang
昨天
16
0
很遗憾,没有一篇文章能讲清楚线程的生命周期!

(手机横屏看源码更方便) 注:java源码分析部分如无特殊说明均基于 java8 版本。 简介 大家都知道线程是有生命周期,但是彤哥可以认真负责地告诉你网上几乎没有一篇文章讲得是完全正确的。 ...

彤哥读源码
昨天
18
0
jquery--DOM操作基础

本文转载于:专业的前端网站➭jquery--DOM操作基础 元素的访问 元素属性操作 获取:attr(name);$("#my").attr("src"); 设置:attr(name,value);$("#myImg").attr("src","images/1.jpg"); ......

前端老手
昨天
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部