jQuery实现按钮点击遮罩加载及处理完后恢复的效果


Posted in Javascript onJune 07, 2016

本文实例讲述了jQuery实现按钮点击遮罩加载及处理完后恢复的效果。分享给大家供大家参考,具体如下:

运行效果图如下:

jQuery实现按钮点击遮罩加载及处理完后恢复的效果

具体代码如下:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="EasyUiLoad.aspx.cs" Inherits="EasyUiLoad" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <title>EasyUI加载效果</title>
  <style type="text/css">
  body{font-size:12px}
  .datagrid-mask{position:absolute;left:0;top:0;width:100%;height:100%;opacity:.5;filter:alpha(opacity=30);background-color:#e0ecff;display:none}
  .datagrid-mask-msg{position:absolute;top:50%;margin-top:-20px;padding:10px 15px 10px 15px;width:auto;height:16px;border-width:2px;border-color:#68a5ff;border-style:solid;display:none}
  .img1{vertical-align:middle;}
  </style>
  <script src="JS/jquery-1.9.1.js" type="text/javascript"></script>
  <script type="text/javascript">
    //load
    function EasyUILoad() {
      $("<div class=\"datagrid-mask\"></div>").css({ display: "block", width: "100%", height: "auto !important" }).appendTo("body");
      $("<div class=\"datagrid-mask-msg\"></div>").html("<img src='images/loading.gif' class='img1' /> 正在运行,请稍候。。。").appendTo("body").css({ display: "block", left: ($(document.body).outerWidth(true) - 190) / 2, top: ($(window).height() - 45) / 2 });
    }
    //display Load
    function dispalyEasyUILoad() {
      $(".datagrid-mask").remove();
      $(".datagrid-mask-msg").remove();
    }
  </script>
</head>
<body>
  <form id="form1" runat="server">
  <div>
    <asp:Button ID="Button1" runat="server" Text="加载效果" OnClientClick="javascript:EasyUILoad();" onclick="Button1_Click" />
  </div>
  </form>
</body>
</html>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class EasyUiLoad : System.Web.UI.Page
{
  protected void Page_Load(object sender, EventArgs e)
  {
  }
  protected void Button1_Click(object sender, EventArgs e)
  {
    System.Threading.Thread.Sleep(5000);
    //处理逻辑...
    //完成处理后恢复
    ClientScript.RegisterStartupScript(this.GetType(), "closeLoad", "dispalyEasyUILoad();", true);
  }
}

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
js 文件引入实现代码
Apr 23 Javascript
查看图片(前进后退)功能实现js代码
Apr 24 Javascript
深入浅析JavaScript的API设计原则
Jun 14 Javascript
JS实现添加,替换,删除节点元素的方法
Jun 30 Javascript
jQuery实现获取隐藏div高度的方法示例
Feb 09 Javascript
Angular4学习之Angular CLI的安装与使用教程
Jan 04 Javascript
浅析Visual Studio Code断点调试Vue
Feb 27 Javascript
angularJs中ng-model-options设置数据同步的方法
Sep 30 Javascript
JS与SQL方式随机生成高强度密码示例
Dec 29 Javascript
JavaScript中常用的简洁高级技巧总结
Mar 10 Javascript
jQuery实现的鼠标拖动画矩形框示例【可兼容IE8】
May 17 jQuery
javascript实现简易的计算器
Jan 17 Javascript
原生js三级联动的简单实现代码
Jun 07 #Javascript
AngularJS 遇到的小坑与技巧小结
Jun 07 #Javascript
模仿password输入框的实现代码
Jun 07 #Javascript
无缝滚动的简单实现代码(推荐)
Jun 07 #Javascript
Bootstrap学习笔记之css样式设计(2)
Jun 07 #Javascript
AngularJS 如何在控制台进行错误调试
Jun 07 #Javascript
JQuery异步加载PartialView的方法
Jun 07 #Javascript
You might like
PHP转换IP地址到真实地址的方法详解
2013/06/09 PHP
php计算整个目录大小的方法
2015/06/01 PHP
[原创]php token使用与验证示例【测试可用】
2017/08/30 PHP
在laravel5.2中实现点击用户头像更改头像的方法
2019/10/14 PHP
gearman中任务的优先级和返回状态实例分析
2020/02/27 PHP
javascript 写类方式之六
2009/07/05 Javascript
jQuery使用数组编写图片无缝向左滚动
2012/12/11 Javascript
jquery ajax的success回调函数中实现按钮置灰倒计时
2013/11/19 Javascript
Json实现异步请求提交评论无需跳转其他页面
2014/10/11 Javascript
IE7浏览器窗口大小改变事件执行多次bug及IE6/IE7/IE8下resize问题
2015/08/21 Javascript
jfinal与bootstrap的登录跳转实战演习
2015/09/22 Javascript
jQuery实现简单的文件上传进度条效果
2020/03/26 Javascript
BootStrap无限级分类(无限极分类封装版)
2016/08/26 Javascript
Vue2.0基于vue-cli+webpack同级组件之间的通信教程(推荐)
2017/09/14 Javascript
jquery操作select常见方法大全【7种情况】
2019/05/28 jQuery
javascript中的offsetWidth、clientWidth、innerWidth及相关属性方法
2020/05/14 Javascript
vue element 关闭当前tab 跳转到上一路由操作
2020/07/22 Javascript
如何使用JavaScript实现无缝滚动自动播放轮播图效果
2020/08/20 Javascript
vant-ui框架的一个bug(解决切换后onload不触发)
2020/11/11 Javascript
python多重继承实例
2014/10/11 Python
python多线程用法实例详解
2015/01/15 Python
安装Python的web.py框架并从hello world开始编程
2015/04/25 Python
python中json格式数据输出的简单实现方法
2016/10/31 Python
使用Pyinstaller的最新踩坑实战记录
2017/11/08 Python
详解用Python处理HTML转义字符的5种方式
2017/12/27 Python
基于python解线性矩阵方程(numpy中的matrix类)
2019/10/21 Python
python 画函数曲线示例
2019/12/04 Python
python爬虫容易学吗
2020/06/02 Python
CSS3 毛玻璃效果
2019/08/14 HTML / CSS
html5指南-2.如何操作document metadata
2013/01/07 HTML / CSS
《最大的“书”》教学反思
2014/02/14 职场文书
二手房买卖协议书
2014/04/10 职场文书
2014年五四青年节演讲比赛方案
2014/04/22 职场文书
市委常委会班子党的群众路线教育实践活动整改方案
2014/10/25 职场文书
教师工作表现自我评价
2015/03/05 职场文书
《狼牙山五壮士》读后感:宁死不屈,视死如归
2019/08/16 职场文书