ajax遮罩层

最新推荐文章于 2022-02-18 16:24:48 发布

weixin_33725807

最新推荐文章于 2022-02-18 16:24:48 发布

阅读量417

点赞数

文章标签： python javascript json ViewUI

原文链接：https://my.oschina.net/u/914655/blog/494562

版权

2019独角兽企业重金招聘Python工程师标准>>>

遮罩层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>

转载于:https://my.oschina.net/u/914655/blog/494562