- 所在位置：
- 首页 >
- 编程技术 >
- CSS/HTML >
- 用CSS怎样实现一个简单的加载等待提示框
用CSS怎样实现一个简单的加载等待提示框
Admin 2022-07-09 群英技术资讯 687 次浏览
在实际应用中，我们有时候会遇到“用CSS怎样实现一个简单的加载等待提示框”这样的问题，我们该怎样来处理呢？下文给大家介绍了解决方法，希望这篇“用CSS怎样实现一个简单的加载等待提示框”文章能帮助大家解决问题。 需求：
有时加载数据比较慢，页面一直没有反应，用户也许会不停的刷，而且用户体验也不好
解决：
在js中加入以下代码即可
//提示信息
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() - 45) / 2 });
}
//取消提示信息
function MoveRunningDiv() {
$("div[class='datagrid-mask']").remove();
$("div[class='datagrid-mask-msg']").remove();
}
在需要的地方调用即可。
效果如下：整个页面不可编辑
总结
到此这篇关于“用CSS怎样实现一个简单的加载等待提示框”的文章就介绍到这了,更多相关内容请搜索群英网络以前的文章或继续浏览下面的相关文章，希望大家以后多多支持群英网络！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。
猜你喜欢
-
background-position属性的百分比值怎样用？一文带你搞懂
background-position属性的定义是设置背景图片的位置，其默认值为0% 0%。很多人对于这个百分比值的使用不是很清楚，因此，这篇文章主要和大家聊一聊background-position属性中百分比值的使用，感兴趣的朋友就继续往下看吧。
-
HTML块元素居中如何实现，有几种方式
块元素位置居中有两种存在：一种是有两个块元素，其中一个块元素相对另外一个块元素居中；另外一种是一个块元素相对于顶级父容器居中 第一种实现方式如下： <html><head><metacharset="utf-8"/><title>测试</title><styletype=&q
-
CSS中动画的基础知识是什么，怎样实现奔跑小熊的动画
CSS如何实现动画一？什么是动画？动画就是一帧又一帧图片,按顺序展现在人的眼前，但是由于人的视觉反应不过来就会产生图画动起来的效果。下文有实例供大家参考，对大家了解操作过程或相关知识有一定的帮助，而且实用性强，希望这篇文章能帮助大家，下面我们一起来了解看看吧。
-
纯CSS实现通知公告滚动效果
通知栏是我们比较常见的组件之一，我们在很多网站都能看到通知栏，这主要用来显示网站的通知和公告。有很多通知公告栏是滚动效果显示，那么这是怎样实现的呢？下面分享几个用纯CSS代码实现通知公告滚动效果，感兴趣的朋友一起来学习下吧。
-
css中rgba与rgb如何使用？区别在哪？
css中rgba与rgb如何使用？对CSS熟悉的朋友应该了解CSS 中的颜色有三种定义方式：使用颜色方法（RGB、RGBA、HSL、HSLA)，十六进制颜色值和预定义的颜色名称，我们比较常用的就有rgba与rgb，本文就给大家来介绍一下css中rgba与rgb的使用及区别。
推荐内容
成为群英会员,开启智能安全云计算之旅
立即注册
Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所有
增值电信经营许可证 : B1.B2-20140078 粤ICP备09006778号 域名注册商资质 粤 D3.1-20240008
