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", "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