loading效果前端界面加载数据时的遮罩界面

最新推荐文章于 2024-05-17 03:22:47 发布

yb305小白

最新推荐文章于 2024-05-17 03:22:47 发布

阅读量4.2k

点赞数

分类专栏： web前端插件文章标签： javascript html html5 jquery css

本文链接：https://blog.csdn.net/yb305/article/details/41808433

版权

web前端同时被 2 个专栏收录

31 篇文章 0 订阅

订阅专栏

插件

3 篇文章 0 订阅

订阅专栏

<html>
<head>
	<meta charset="UTF-8">
	<link href="./loading.css" rel="stylesheet" type="text/css"/>
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<button onclick="test()">测试加载loading</button>
<script>
function test(){
	ajaxLoading('数据处理中，请稍后...');
	setTimeout(function(){
		ajaxLoadEnd()
	},2000);
}
//使用loading效果
function ajaxLoading(msg){   
	addPanelMask();
    $("<div class='datagrid-mask-msg'></div>").html(msg ? msg : "正在处理,请稍候...").appendTo("body").css({
     "display":"block",
     "z-index":99999,
     "left":($(document.body).outerWidth(true) - 190) / 2,
     "top":($(window).height() - 45) / 2
    });
 
}
 
//遮罩整个界面
function addPanelMask(){
	$("<div class='datagrid-mask'></div>").appendTo("body").css({
	"display":"block",
	"z-index":9999,
	"width":"100%",
	"height":$(window).height()
	}); 
}
 
//移除界面遮罩层
function ajaxLoadEnd(){
	$(".datagrid-mask").remove();   
	$(".datagrid-mask-msg").remove();  
}
</script>
</body>
</html>

css样式文件

.datagrid-mask {
    background: #ccc;
	position: absolute;
    left: 0;
    top: 0;
}

.datagrid-mask-msg {
	border-color: #D3D3D3;
    position: absolute;
    margin-top: -20px;
    padding: 10px 5px 10px 30px;
    width: auto;
    height: 16px;
    border-width: 2px;
    border-style: solid;
	background: #ffffff url(images/loading.gif) no-repeat scroll 5px center;
}

引入的loading的图片

效果：

yb305小白

关注

0
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
loading效果前端界面加载数据时的遮罩界面

//使用loading效果function ajaxLoading(){ addPanelMask(); $("").html("正在处理,请稍候...").appendTo("body").css({ "display":"block", "z-index":99999, "left":($(document.body).outerWid
复制链接

扫一扫