CSS制作提示框 ‘正在加载请。。。。。’的方法

这篇文章主要介绍了关于css制作提示框 ‘正在加载请。。。。。’的方法,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下

最近做项目遇到这样的需求,页面加载数据比较慢,一直没有反应,下面小编给大家带来了基于CSS制作提示框 ‘正在加载请。。。。。’功能,需要的朋友参考下吧

 需求:

              有时加载数据比较慢,页面一直没有反应,用户也许会不停的刷,而且用户体验也不好

解决:

立即学习“前端免费学习笔记(深入)”;

         在js中加入以下代码即可

//提示信息  function AddRunningp() {      $("

").css({ display: "block", width: "100%", height: $(document).height() }).appendTo("body"); $("

").html("正在处理,请耐心等待...").appendTo("body").css({ display: "block", left: ($(document.body).outerWidth(true) - 190) / 2, top: ($(document).height() - 45) / 2 }); } //取消提示信息 function MoveRunningp() { $("p[class='datagrid-mask']").remove(); $("p[class='datagrid-mask-msg']").remove(); }

              在需要的地方调用即可。

效果如下:整个页面不可编辑

                                             CSS制作提示框 ‘正在加载请。。。。。’的方法                                     

以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注PHP中文网!

相关推荐:

关于CSS3制作的20种loading动效

关于css3图片边框border-image的用法

以上就是CSS制作提示框 ‘正在加载请。。。。。’的方法的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1610726.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月24日 01:38:26
下一篇 2025年12月24日 01:38:53

相关推荐

  • CSS 使用Sprites技术实现圆角的效果

    这篇文章主要介绍了关于css 使用sprites技术实现圆角的效果,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下 使用CSS Sprites技术画圆角,简单的讲就是把一个圆做在一张图上,定义4个p,每个p取图的一个角做背景,下面看具体实现方法。 首先来简单说一下什么是Sprites,…

    2025年12月24日
    000
  • css中关于定位属性position为fixed的使用介绍

    这篇文章主要介绍了关于css中关于定位属性position为fixed的使用介绍,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下 当一个div想要定位时,我们第一反应是position属性,而position属性除了默认值外,还有absolute,relative和fixed,下面有个…

    好文分享 2025年12月24日
    000
  • CSS透明opacity和IE各版本透明度滤镜filter的用法

    css3的透明度属性opacity想必大家都已经用的无处不在了。而对于不支持css3的浏览器如何进行透明处理,保持浏览器效果的一致,本篇文章主要介绍了详解css透明opacity和ie各版本透明度滤镜filter的最准确用法,有兴趣的可以了解一下。 CSS3的透明度属性opacity想必大家都已经用…

    好文分享 2025年12月24日
    000
  • css浏览器不兼容原因的分析

    这篇文章主要介绍了关于css浏览器不兼容原因的分析,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下 浏览器的不兼容,大家肯定都是深恶痛绝的,往往我们只是去做修补,却忘了更重要的事情,那就是追溯根源,避免类似的不兼容再次出现。 在下不才,归纳几点html编码要素,望能指点各位:1.文字本…

    好文分享 2025年12月24日
    000
  • 关于CSS中权值、层叠和重要性(!important)的分析

    下面为大家带来一篇浅谈css 权值 层叠 重要性(!important)。内容挺不错的,现在就分享给大家,也给大家做个参考。 1、特殊性 权值 有的时候我们为同一个元素设置了不同的CSS样式代码,那么元素会启用哪一个CSS样式呢?我们来看一下面的代码: p{color:red;} .first{co…

    好文分享 2025年12月24日
    000
  • 关于CSS中视窗单位和百分比单位的使用

    这篇文章主要介绍了详解css中视窗单位和百分比单位的使用,是css入门学习中的基础知识,需要的朋友可以参考下 视窗(Viewport)单位 视窗(Viewport)单位是相对单位,意味着它们没有客观的尺寸。它们的大小是由视窗(Viewport)大小决定的。下面是四个与视窗(Viewport)有关的单…

    2025年12月24日 好文分享
    000
  • 通过优先级对比验证CSS控制样式的三种方式

    这篇文章主要介绍了关于通过优先级对比验证css控制样式的三种方式,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下 大家都知道,CSS的中文名叫做层叠样式表,而CSS在控制样式的时候,有三种引入方式,这里简单介绍下CSS控制样式的三种方式 好了,直入主题,大家都知道,CSS的中文名叫做层…

    2025年12月24日 好文分享
    000
  • 关于CSS实现禁止鼠标点击事件的代码

    这篇文章介绍的是通过纯css实现禁止鼠标点击事件,比起javascript来更加灵活,有需要的可以参考学习。 JavaScript有一个preventDefault方法, 他可用以来取消事件的默认动作。比如取消打开链接,选择文本或拖放等。 event.preventDefault() 该方法将通知 …

    好文分享 2025年12月24日
    000
  • CSS中如何使用负margin值来调整居中位置

    这篇文章主要介绍了css中使用负margin值来调整居中位置的方法,文中同时提到了这种常用方法的一些值得注意的地方,需要的朋友可以参考下 这或许是最常用的居中方法。如果知道了各个元素的大小,设置等于宽高一半大小的负margin值(如果没有使用box-sizing: border-box样式,还需要加…

    2025年12月24日
    000
  • CSS使用盒模型实例

    下面为大家带来一篇css使用盒模型实例分析。内容挺不错的,现在就分享给大家,也给大家做个参考。 盒子是CSS中的基础概念,我们需要使用它来配置元素的外观以及文档的整体布局。 1. 为元素应用内边距 应用内边距会在元素内容和边距之间添加空白。我们可以为内容盒的每个边界单独设置内边距,或者使用 padd…

    2025年12月24日 好文分享
    000
  • 关于CSS制作的三角形和圆形小按钮的代码

    这篇文章主要介绍了一波css制作的三角形和圆形小按钮示例,都采用了灰色的常见按钮样式设计,需要的朋友可以参考下 参考了天猫、微博等网站的做法,用纯html和css实现,效果还是不错的。以下是成果,兼容主流浏览器,包括ie6。 *{margin:0; padding:0; list-style:non…

    2025年12月24日
    000
  • 关于CSS 平级和儿子级样式的写法

    这篇文章主要与大家分享了css 平级和儿子级样式的写法,比较适合初学者,正在学习css 的朋友可以参考下 input:checked+ol:这个是讲当inoput 拥有了checked后它平级的OL拥有的样式。 input:checked+ol>li:中的大于是指当inoput 拥有了chec…

    好文分享 2025年12月24日
    000
  • CSS制作图形变形弹出的效果

    这篇文章主要介绍了一个css制作图形变形弹出效果的示例分享,弹出窗的大小可以使用jquery来修改,需要的朋友可以参考下 弹出窗体是网页常用的一个交互设计,在这个注重交互动画体验的时代,网页弹窗也可以来点新鲜的点子,比如今天分享的CSS 变形Modal Window。 当用户点击按钮时,按钮将会变成…

    2025年12月24日
    000
  • 对于CSS浮动float和定位position的解析

    本文针对css浮动float、定位position进行学习理解,通过实例帮助大家掌握css浮动float、定位position技巧,感兴趣的小伙伴们可以参考一下 一 . 浮动float I . 定义及规则 float默认为none,对应标准流的情况。当float : left;时,元素就会向其父元素…

    2025年12月24日 好文分享
    000
  • 使用CSS3来实现滚动视差效果

    这篇文章主要介绍了使用css3来实现滚动视差效果的教程,主要使用到了background-attachment属性,需要的朋友可以参考下 “视差(parallax)”效果现在在互联网上越来越流行了。如果你还没听说过什么是视差效果,它其实就是利用图片形成不同的层,分别以不同的速度,不同的方向移动产生的…

    好文分享 2025年12月24日
    000
  • CSS的table-layout属性的用法

    今天给大家详细说一下table-layout属性的用法, tablelayout属性用来显示表格单元格、行、列的算法规则。本文通过实例代码给大家介绍了css的table-layout属性的用法,需要的朋友参考下吧 前言: 今天来和大家详细说一下table-layout属性的用法。   /*eg:设置…

    2025年12月24日
    000
  • CSS实现有立体感的横向按钮式菜单效果

    这篇文章主要为大家介绍了css实现有立体感的横向按钮式菜单效果代码,可实现鼠标滑过呈现按钮按下的效果,具有极强的3d立体效果,涉及css基于hover属性的border边框设置技巧,需要的朋友可以参考下 本文实例讲述了CSS实现有立体感的横向按钮式菜单效果代码。分享给大家供大家参考。具体如下: 这是…

    好文分享 2025年12月24日
    000
  • 关于css属性的选择对动画性能的影响

    下面为大家带来一篇深入理解css属性的选择对动画性能的影响。内容挺不错的,现在分享给大家,也给大家做个参考。 现在手机的占比越来越高,各种酷炫页面层出不穷,这些特效都离不开css动画。说到css动画,主流的情况也就无非这两大类:位移和形变。而我们在写一个动画特效的过程中,如何去提升它的性能呢?当然首…

    2025年12月24日 好文分享
    000
  • CSS实现radio和checkbox的 实现效果

    这篇文章主要介绍了纯css实现radio和checkbox实现效果示例的相关资料,内容挺不错的,现在分享给大家,也给大家做个参考。 radio-and-checkbox 纯CSS实现radio和checkbox实现效果 reset-radio 在开发PC端的项目时,经常会用到radio和checkb…

    好文分享 2025年12月24日
    000
  • 关于CSS实现漂亮的下拉导航效果

    这篇文章主要为大家介绍了纯CSS实现漂亮的下拉导航效果代码,通过简单的css样式设置及针对鼠标事件的响应实现下拉菜单导航效果,非常具有实用价值,需要的朋友可以参考下 本文实例讲述了纯CSS实现漂亮的下拉导航效果代码。分享给大家供大家参考。具体如下: 这是一款纯CSS完成的下拉导航代码,蓝色经典色调,…

    2025年12月24日
    000

发表回复

登录后才能评论
关注微信