“正在加载,请稍后...”的实现方法

最新推荐文章于 2022-01-14 11:18:43 发布

IT_小草

最新推荐文章于 2022-01-14 11:18:43 发布

阅读量1.1w

点赞数

CC 4.0 BY-SA版权

分类专栏： css 文章标签： css

本文链接：https://blog.youkuaiyun.com/IT_xiaocao/article/details/73485025

css 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一种使用CSS和JavaScript创建加载提示效果的方法。通过添加自定义的遮罩层和消息提示，可以在页面上显示‘正在处理，请稍候...’的消息，并在处理完成后移除该提示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 .datagrid-mask{
		position:absolute;
		left:0;
		top:0;
		width:100%;
		height:100%;
		background:#ccc;
		opacity:0.3;
		filter:alpha(opacity=30);
		display:none;
	}
	.datagrid-mask-msg{
		position:absolute;
		top:50%;
		margin-top:-20px;
		width:auto;
		height:16px;
		padding:12px 5px 10px 30px;
		/* background:#fff url('img/pagination_loading.gif') no-repeat scroll 5px 10px;
		border:2px solid #6593CF; */
		color:#222;
		display:none;
	}

如下是js代码添加div，之后直接调用就可以了，第一个方法时显示样式，第二个方法时执行完了后去掉这个样式。

function AddRunningDiv() {
            $("<div class=\"datagrid-mask\"></div>").css({ display: "block", width: "100%", height: $(document).height() }).appendTo("body");
            $("<div class=\"datagrid-mask-msg\"></div>").html("正在处理，请稍候...").appendTo("body").css({ display: "block", left: ($(document.body).outerWidth(true) - 190) / 2, top: ($(document).height() - 380)});
        } 
    	function MoveRunningDiv() {
            $("div[class='datagrid-mask']").remove();
            $("div[class='datagrid-mask-msg']").remove();
        }