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

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

思路:

1.点击按钮调用OnClientClick事件,添加dom元素及样式。

2.当Click中逻辑执行完后,在Click中调用js方法删除掉刚才添加的dom元素。

复制代码
 1 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="EasyUiLoad.aspx.cs" Inherits="EasyUiLoad" %>
 2  
 3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 4  
 5 <html xmlns="http://www.w3.org/1999/xhtml">
 6 <head runat="server">
 7     <title>EasyUI加载效果</title>
 8     <%--添加css--%>
 9     <style type="text/css">
10     body{font-size:12px}
11     .datagrid-mask{position: fixed;left:0;top:0;width:100%;height:100%;opacity:0.8;filter:alpha(opacity=30);background-color: rgb(0,0,0);display:none}
12     .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}
13     .img1{vertical-align:middle;}
14     </style>
15     <script src="JS/jquery-1.9.1.js" type="text/javascript"></script>
16     <script type="text/javascript">
17         //添加dom元素及样式
18         function EasyUILoad() {
19             $("<div class=\"datagrid-mask\"></div>").css({ display: "block", width: "100%", height: "auto !important" }).appendTo("body");
20             $("<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 });
21         }
22  
23         //通过class删除dom元素
24         function dispalyEasyUILoad() {
25             $(".datagrid-mask").remove();
26             $(".datagrid-mask-msg").remove();
27         }      
28     </script>
29 </head>
30 <body>
31     <form id="form1" runat="server">
32     <div>
33         <asp:Button ID="Button1" runat="server" Text="加载效果" OnClientClick="javascript:EasyUILoad();" onclick="Button1_Click" />
34     </div>
35     </form>
36 </body>
37 </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);
        //处理逻辑...
        //完成处理后恢复
        ScriptManager.RegisterStartupScript(this, this.GetType(), "", "<script>dispalyEasyUILoad();</script>", false);
    }
}
复制代码

 

转载于:https://my.oschina.net/smartsmile/blog/814876

 

posted @   今♀妃惜彼  阅读(243)  评论(0编辑  收藏  举报
编辑推荐:
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
阅读排行:
· 在鹅厂做java开发是什么体验
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
点击右上角即可分享
微信分享提示