背景
C#在进行某些调用操作时需要隐藏背景,等待刷新。
步骤
1、前端设置
<!--Loading Mask Region--> <div> <div id="divMaskFrame" style="background-color: #F2F4F7; display: none; position: absolute; left: 0px; top: 0px;"> </div> <div id="divProgress" style="text-align: center; display: none; position: fixed; top: 50%; left: 50%;"> <asp:Image ID="imgLoading" runat="server" ImageUrl="../Resources/Images/LoadingMask.gif" /> </div> </div>
2、JS代码
<script type="text/javascript"> // Loading Mask function // ref: https://dotblogs.com.tw/joysdw12/archive/2012/12/13/85629.aspx function RotateAnimation(obj) { var $this = $(obj); $this.button('loading'); setTimeout(function () { $this.button('reset'); }, 2500); } // 顯示讀取遮罩 function ShowProgressBar() { // Need to setTimeout to delay for IE Browser setTimeout(function () { displayProgress(); displayMaskFrame(); }, 300); } // 隱藏讀取遮罩 function HideProgressBar() { var progress = $('#divProgress'); var maskFrame = $("#divMaskFrame"); progress.hide(); maskFrame.hide(); } // 顯示讀取畫面 function displayProgress() { var w = $(document).width(); var h = $(window).height(); // 若取 document 的位置會跑掉 var progress = $('#divProgress'); progress.css({ "z-index": 999, "top": (h / 2) - (progress.height() / 2), "left": (w / 2) - (progress.width() / 2) }); progress.show(); } // 顯示遮罩畫面 function displayMaskFrame() { var w = $(window).width(); var h = $(document).height(); var maskFrame = $("#divMaskFrame"); maskFrame.css({ "z-index": 998, "opacity": 0.8, "width": w, "height": h }); maskFrame.show(); } </script>
3、使用方法
OnClientClick="RotateAnimation(this); return ShowProgressBar();"