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

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

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

相关推荐