文档章节

Jquery实现按钮点击遮罩加载,处理完后恢复

深圳大道
 深圳大道
发布于 2016/12/29 15:32
字数 269
阅读 0
收藏 0
<%@ 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);
    }
}

本文转载自:http://blog.csdn.net/smartsmile2012/article/details/43530295

深圳大道
粉丝 3
博文 877
码字总数 0
作品 0
深圳
架构师
私信 提问
关于jquery实现遮罩层

请高手帮忙:jquery实现遮罩层,功能是当用户不点击关闭遮罩层的按钮不能进行其他操作,我是用了overlay属性,设置为true,但是这样的话遮罩层周围都是灰色的了,我只是希望它周围不是灰色,...

嘣猪嗤痴
2013/08/28
467
5
《基于JQuery和CSS的特效整理》系列分享专栏

《基于JQuery和CSS的特效整理》已整理成PDF文档,点击可直接下载至本地查阅 https://www.webfalse.com/read/201724.html 文章 一款基于jQuery的颜色拾取器 分享一款基于jQuery的QQ表情插件 ...

kaixin_code
2018/11/04
0
0
鼠标移入移出效果 -- jQuery/Vue版

元素内遮罩层根据鼠标方向显示的效果比较常见,比如百度图片里的图片信息展示。自己动手实现jQuery插件版和Vue组件版效果。 原文链接 实现思路 1、根据鼠标的位置定位在元素内出现的方向 2、...

bestvist
2018/06/22
0
0
jQuery Fancybox插件使用参数详解

今天给大家介绍的jquery图片播放插件叫Fancybox,相比LightBox来说,Fancybox相对庞大点,配置也更丰富一些,相信你会喜欢的。 Fancybox的项目主页地址:http://fancybox.net/ Fancybox的特点...

欣儿
2014/04/18
0
0
easyui为tab添加遮罩层

项目里要用HighChart显示图表,如果返回的数量量太多,生成图表是一个很耗时的过程。tab控件又没有显示遮罩的设置(至少本菜是没有找到), Google了一下,根据另一个兄台写的方法,拿来改造...

文文1
2015/08/03
0
0

没有更多内容

加载失败,请刷新页面

加载更多

“旧城改造”的背后——银泰新零售阿里云解决方案(上)

相关免费课程《银泰新零售上云解决方案精讲》上线中 立足实战 讲透经典案例 助你快速理解新零售 第一节学习地址 第二节学习地址 传统线下商业体上云的案例 与其说银泰上云,倒不如说银泰“旧...

阿里云官方博客
25分钟前
2
0
记一次升级Oracle驱动引发的死锁

问题描述 近期项目需要从虚拟机环境迁移到容器环境,其中有一个项目在迁移到容器环境之后的两天之内出现了2次“死锁(deadlock)”的问题,部分关键日志如下: Found one Java-level deadlock:...

ksfzhaohui
27分钟前
13
0
MySQL 中的 information_schema 数据库

欢迎查看原文 - 本博客仅记录 https://blog.csdn.net/kikajack/article/details/80065753 -- 是否开启bin_log日志: off为关闭-- show variables like 'log_%'; show variables like '......

莫库什勒
35分钟前
1
0
Random在高并发下的缺陷以及JUC对其的优化

Random可以说是每个开发都知道,而且都用的很6的类,如果你说,你没有用过Random,也不知道Random是什么鬼,那么你也不会来到这个技术类型的社区,也看不到我的博客了。但并不是每个人都知道...

编程SHA
39分钟前
2
0
T5大牛带你解析:如何实现分布式技术

1.分布式事务 2. 分布式锁 Java 原生 API 虽然有并发锁,但并没有提供分布式锁的能力,所以针对分布式场景中的锁需要解决的方案。 分布式锁的解决方案大致有以下几种: 基于数据库实现 基于缓...

李红欧巴
51分钟前
35
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部