<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>实现数据正在加载中...提示</title>
<style>
* {
padding: 0px;
margin: 0px;
}
/*全屏背景遮罩层*/
.loadingPage_bg1 {
background: none repeat scroll 0 0 #000;
height: 100%;
left: 0; /*:rgba(0,0,0,0.5);*/
opacity: 0.7;
filter: alpha(opacity=70);
width: 100%;
position: absolute;
top: 0px;
z-index: 110;
}
/*局部背景遮罩*/
.loadingPage_bg {
background: none repeat scroll 0 0 #fff;
height: 100%;
left: 0; /*:rgba(0,0,0,0.5);*/
opacity: 1;
filter: alpha(opacity=100);
width: 100%;
z-index: 110;
}
.mtop {
margin-top: 30px;
}
#loadingPage {
display: block;
font-weight: bold;
font-size: 12px;
color: #595959;
height: 28px;
left: 50%;
line-height: 27px;
margin-left: -74px;
margin-top: -14px;
padding: 10px 10px 10px 50px;
position: absolute;
text-align: left;
top: 50%;
width: 148px;
z-index: 111;
background: url(img/loading.gif) no-repeat scroll 12px center #FFFFFF;
border: 2px solid #86A5AD;
}
p {
font-size: 18px;
font-weight: bold;
}
</style>
<script src="js/jquery-1.8.0.min.js"></script>
<script src="js/CommonPerson.js"></script>
<script type="text/javascript">
$(function () {
$("#btnFullScreenShow").unbind("click").click(function () {
CommonPerson.Base.LoadingPic.FullScreenShow();
/*设置setTimeout是为了演示效果
在实际应用中可以在ajax请求前调用：CommonPerson.Base.LoadingPic.FullScreenShow(); 来全屏显示“数据正在加载中...”的loading图
当ajax请求成功返回数据，在把数据填充到页面之前调用：CommonPerson.Base.LoadingPic.FullScreenHide(); 来隐藏全屏loading图
*/
setTimeout("fullHide()", 3000);
});
//$("#btnFullScreenShow").live("click", function () {
// CommonPerson.Base.LoadingPic.FullScreenShow();
// setTimeout("fullHide()", 3000);
//});
//$("#btnPartShow").unbind("click", function () {
// var div = 'div100';
// CommonPerson.Base.LoadingPic.PartShow(div);
// setTimeout("partHide('" + div + "')", 3000);
//});
$("#btnPartShow").live("click", function () {
var div = 'div100';
CommonPerson.Base.LoadingPic.PartShow(div);
/*设置setTimeout是为了演示效果
在实际应用中可以在ajax请求前调用：CommonPerson.Base.LoadingPic.PartShow(div); 来局部显示“数据正在加载中...”的loading图
当ajax请求成功返回数据，在把数据填充到页面之前调用：CommonPerson.Base.LoadingPic.FullScreenHide(); 来隐藏局部loading图
*/
setTimeout("partHide('" + div + "')", 3000);
});
});
function fullHide() {
CommonPerson.Base.LoadingPic.FullScreenHide();
}
function partHide(div) {
CommonPerson.Base.LoadingPic.PartHide(div);
}
</script>
</head>
<body>
<div>
<center>
<h1>几则笑话</h1>
</center>
<p>初中的时候迷武侠小说，上课的时候都在看一次上课看金庸《天龙八部》的时候被老师发现了，没收，然后大吼：把其它七本给我交出来。</p>
<br />
<p>四只老鼠吹牛：甲：我每天都拿鼠药当糖吃；乙：我一天不踩老鼠夹脚发痒；丙：我每天不过几次大街不踏实；丁：时间不早了，回家抱猫去咯。</p>
<br />
<p>一群蚂蚁爬上了大象的背，但被摇了下来，只有一只蚂蚁死死地抱着大象的脖子不放，下面的蚂蚁大叫：掐死他，掐死他，小样，还他妈反了！</p>
<div id="div100"></div>
<br />
<p>老鼠没女朋友特别郁闷，终于一只蝙蝠答应嫁给他，老鼠十分高兴。别人笑他没眼光，老鼠：你们懂什么，她好歹是个空姐。</p>
<br />
<p>昨天梦见上帝说可满足我一个愿望我拿出地球仪说要世界和平，他说太难换一个吧，我拿出你的照片说要这人变漂亮，他沉思了一下说拿地球仪我再看看。</p>
<br />
<p>一女奇丑，嫁不出去，希望被拐卖。终于梦想成真，却半月卖不出去。绑匪将其送回，她坚决不下车，绑匪咬牙一跺脚：走，车不要了。</p>
<br />
<p>小明告诉妈妈，今天客人来家里玩的时候，哥哥放了一颗图钉在客人的椅子上，被我看到了。妈妈说：“那你是怎幺做的呢？”小明说：“我在一旁站着，等客人刚要坐下来的时候，我将椅子从他后面拿走了。”</p>
<br />
<p>一天在拥挤的公车上的一段对话情形如下：一个站着的怀孕妇人对着他身旁坐着的一位男子说：『你不知道我怀孕了吗？』(想要他让座....)只见男子很紧张的说：『孩子不是我的！』</p>
<br />
<p>小明已经上大三了，还是没有女朋友。在寝室的哥们的怂恿下，他决定去追一个心仪已久的女生。 一天，他看到那个女生一个人在操场散步，便跟了过去，由于不知如何开口才好，小明心里非常焦急。 眼看那个女生越走越远，他只好从地上捡了一样东西，追上去说：“小姐，这块砖头是不是你掉的啊？” </p>
<br />
<p>酒喝醉了，晕晕糊糊地回家，回家不久就吐了。 第二天早上老婆说：在外边吃就吃了、喝就喝了，就不要来家汇报吃得啥东西了。</p>
<br />
<p>有个卖盾和矛的楚国人，夸他的盾说：“我的盾坚固无比，任何锋利的东西都穿不透它。”又夸耀自己的矛说：“我的矛锋利极了，什么坚固的东西都能刺穿。”路人问他：“用您的矛来刺您的盾，结果会怎么样呢？”那人不知道怎么回答，就走到路人跟前一矛将其扎死，说道：“就你话多！”</p><br/>
<center>
<div style="display: block;">
<input type="button" id="btnFullScreenShow" value="显示隐藏全屏loading图" />
<input type="button" id="btnPartShow" value="显示隐藏局部loading图" />
</div>
</center>
</div>
</body>
</html>
LoadingMsg.rar （7个子文件） 
LoadingMsg 
Web.config 359B img 
loading.gif 2KB js jquery-1.8.0.min.js 91KB jquery-1.9.1.min.js 90KB jquery1.7.js 92KB CommonPerson.js 5KB
LoadingPic.html 7KB资源评论
linyufu2015-07-18很差，没什么用
xianjixiance_2018-03-09感谢分享, 非常实用- gym123452014-08-07不错不错，效果很不错，已经用上了
佛祖的木鱼2014-09-16很差，没什么用
