[ASP.NET] 使用Loading遮罩防止使用者重複點擊

From: http://www.dotblogs.com.tw/joysdw12/archive/2012/12/13/85629.aspx

前言

範例

接下來編寫HTML碼，建立DIV標簽放置相關內容，如下:

<div id="divProgress" style="text-align:center; display: none; position: fixed; top: 50%;  left: 50%;" >
    <asp:Image ID="imgLoading" runat="server" ImageUrl="~/Images/loading.gif" />
    <br />
    <font color="#1B3563" size="2px">資料處理中</font>
</div>
<div id="divMaskFrame" style="background-color: #F2F4F7; display: none; left: 0px;
    position: absolute; top: 0px;">
</div>

最後在加上控制顯示或隱藏的jQuery代碼即可，如下:

// 顯示讀取遮罩
function ShowProgressBar() {
    displayProgress();
    displayMaskFrame();
}

// 隱藏讀取遮罩
function HideProgressBar() {
    var progress = $(‘#divProgress‘);
    var maskFrame = $("#divMaskFrame");
    progress.hide();
    maskFrame.hide();
}
// 顯示讀取畫面
function displayProgress() {
    var w = $(document).width();
    var h = $(window).height();
    var progress = $(‘#divProgress‘);
    progress.css({ "z-index": 999999, "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": 999998, "opacity": 0.7, "width": w, "height": h });
    maskFrame.show();
}

之後我們只要在要使用的按鈕上加入 onClientClick 事件觸發 ShowProgressBar(); 即可，如下:

<asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="送出" OnClientClick="ShowProgressBar();" />

結果如下:

如此就以簡單的方法防止，並且也不會讓使用者不知所措，使用觀感也會好一點嘍。