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
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 在鹅厂做java开发是什么体验
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析