通过java、JavaScript和css实现点击按钮后出现灰色遮罩层,并显示动态加载的字样,提高用户体验,废话不多说,上代码(写这个博客的原因是网上代码太多新手根本不知道哪里对哪里,这里剔除所有无关代码,只显示可以出现功能的最少代码)。

第一:效果图为

第二:实现如上效果的代码为

1:遮罩层css代码

 <style type="text/css">
#load{position:fixed; top: 0px; right:0px; bottom:0px;filter: alpha(opacity=60); background-color: #777;
z-index: 1002; left: 0px; display:none;
opacity:0.5; -moz-opacity:0.5;padding-top:100px;color: #000000}
</style>

2:加载中div

 <div id="load" align="center"><img src="data:images/loading.gif" width="28" height="28" align="absmiddle"/>加载中...</div>

3:触发遮罩效果的按钮

 <input id="btnSubmit"  name="btnSubmit"  type="button" value="加载" onclick="updateResult();" />

4:界面初始化js,使得遮罩层效果在界面加载时被隐藏

$(document).ready(function() { $('#load').hide(); });

5:点击加载按钮,触发遮罩层效果显示,加载数据完成在退出效果

$('#load').fadeIn();

$('#load').fadeOut();

最后附上实现该效果的loading.gif图,如有需要尽可下载使用:

java javaScript实现遮罩层 动态加载的更多相关文章

  1. Java从Jar文件中动态加载类

    动态加载jar包,在实际开发中经常会需要用到,尤其涉及平台和业务的关系的时候,业务逻辑部分可以独立出去交给业务方管理,业务方只需要提供jar包,就能在平台上运行. 下面通过一个实例来直观演示: 第一: ...

  2. JavaScript(第二十二天)【动态加载js和css】

    学习要点: 1.元素位置 2.动态脚本 3.动态样式 本章主要讲解上一章剩余的获取位置的DOM方法.动态加载脚本和样式.   一.元素位置 上一章已经通过几组属性可以获取元素所需的位置,那么这节课补充 ...

  3. 简单的ajax遮罩层(加载进度圈)cvi_busy_lib.js

    cvi_busy_lib.js cvi_busy_lib.js 是一个基于ajax的遮罩js,遮罩区域为body区域.使用比较简单. 效果: 在下面的Js代码,标注为红色标记为需要设置的参数. 1.g ...

  4. html中的数据岛:利用DSO和javascript在html中动态加载和浏览xml数据

    1.DSO也叫做数据源对象,IE 4.0引入了DSO,在IE 5.0对DSO技术进行很大的扩展.以往如果数据是通过SQL语言对数据库进行查询得到的结果,那么就把它们存放在ADO(ActiveX Dat ...

  5. 页面用一个遮罩层显示加载,加载完后隐藏该div

    <div id="background" class="background" style="display: none; "> ...

  6. JavaScript动态加载CSS和JS文件

    var dynamicLoading = { css: function(path){ if(!path || path.length === 0){ throw new Error('argumen ...

  7. Java动态加载类

    详见:https://blog.csdn.net/zai_xia/article/details/80026325 扩展:java反射机制与动态加载类 https://www.cnblogs.com/ ...

  8. 反射01 Class类的使用、动态加载类、类类型说明、获取类的信息

    0 Java反射机制 反射(Reflection)是 Java 的高级特性之一,是框架实现的基础. 0.1 定义 Java 反射机制是在运行状态中,对于任意一个类,都能够知道这个类的所有属性和方法:对 ...

  9. EasyUI datagrid动态加载json数据

    最近做一个项目,要求是两张张表可能查找出10多种不同的结果集. 如果想只用一个表格就把全部的结果不同的显示出来那么就肯定不同使用固定的字段名字,要通过动态加载后台返回来的数据把它显示出来就必须动态加载 ...

随机推荐

  1. hdu1039

    #include<stdio.h>#include<string.h>const int MAXN=200;char str[MAXN]; bool isvowel(char ...

  2. Oracle笔记(1) 简单查询、限定查询、数据的排序

    Oracle笔记(四) 简单查询.限定查询.数据的排序   一.简单查询 SQL(Structured Query Language) 结构化查询语言,是一种数据库查询和程序设计语言,用于存取数据以及 ...

  3. 移动web开发学习笔记一

    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0&quo ...

  4. [MFC美化] MFC界面UI库总结

    稍微说下自己用过的感受: 1.SkinMagic 动态库DLL使用,(有VC6版本的静态链接库,没能成功调用).对控件:菜单和下拉框(下拉滚动条)有问题.不能自由设置颜色背景 皮肤格式:.smf,可使 ...

  5. Salesforce自主学习(一)

    Salesforce学习--接触Apex: 学习目标: 1.描述出Apex程序语言的关键特点: 2.保存一个Apex类并用另一个Apex类来调用它的方法: 3.使用Developer Console检 ...

  6. 导入spring源码到eclipse

    1.1安装Gradle 可以从http://www.gradle.org/downloads页面下载Gradle.下载后将文件解压到指定目录,我放在D:\软件\gradle-3.3,然后设置环境变量. ...

  7. linux命令之ifconfig详细解释

    依赖于ifconfig命令中使用一些选项属性,ifconfig工具不仅可以被用来简单地获取网络接口配置信息,还可以修改这些配置. 1.命令格式: ifconfig [网络设备] [参数] 2.命令功能 ...

  8. svg图片转换为WEB字体图标

    今天我学会了使用字体制作网站   icomoon.io 制作web文本图标.跟我一起学习吧! (1)字体制作网站   icomoon.io   点击 icomoon APP  --->  imp ...

  9. Swift原理

    背景与概览 Swift 最初是由 Rackspace 公司开发的高可用分布式对象存储服务,并于 2010 年贡献给 OpenStack 开源社区作为其最初的核心子项目之一,为其 Nova 子项目提供虚 ...

  10. 单向链表仿LinkedList

    public class ChainTable { private Node firstNode;//第一个节点 private Node lastNode;//最后一个节点 private int ...