kevinya

當然要先引用jquery檔案

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>  
        <script type="text/javascript" src="http://malsup.github.io/jquery.blockUI.js"></script> 

然後javascript這麼下

function blockScreen() {
                //$.blockUI({message:'把畫面遮罩!'});
                //$.blockUI();
                $.blockUI({ message: '歡迎來到 jsGears.com !' }); }

可以設定一個button觸發blockUI()

<asp:Button ID="btnBlock" runat="server" text="處理中" OnClientClick ="blockScreen();" />

在後端的XXX_click讓網頁暫停三秒，方便看到屏蔽的效果，最後在page_load解除屏蔽效果

 System.Threading.Thread.Sleep(3000)

最後在page_load解除屏蔽效果

 Dim strScript As String = " $.unblockUI();  "
        ScriptManager.RegisterStartupScript(Me, Me.GetType, "unblockUI", strScript, True)

補充一下

要在message裡面加上顯示圖片可以這樣寫

message: '<h3></br><img src="search.jpg" /> 一堆資料載入中...</h3>'

2023/07/21補充：
當blockUI在jquery的modal開窗使用時，會出現在modal後面的問題，完全遮不住modal開窗，這時候改成下面這樣寫即可：

 $.blockUI({
        message: '<h1>處理中請稍候…</h1>',
        theme: false,
        baseZ: 2000 });

2023/07/21補充part2:
實務上blockui, unblockui應用在ajax上面的時候，由於常常是blockui還沒在畫面上出現特效，就已經被unblockui解除掉了，
所以需要搭配setTimeout進行非同步的執行ajax function，就可確保一定會出現blockui的特效，範例如下：

function YourCodeStartHere()
{
    $.blockUI({
        message: '<h1>處理中請稍候…</h1>',
        theme: false,
        baseZ: 2000,
        
    });
    
    //非同步的方式執行ajax function
    setTimeout(() => {
        YourAjaxFunc();
    }, 1000);
}

function YourAjaxFunc() {
    var appPath = '@Url.Content("~/")';
    $.ajax({
        type: 'POST',
        url: appPath + 'YourController/YourAjaxFunc/',
        data: formJSON,

        success: function (resultData) {
            if (resultData.IsSuccess == true) {
                alert('存檔成功!');                
            }
            else {
                console.log(resultData.ErrorMsg);
                alert('出現意料之外的錯誤，請查看F12的writeLog()紀錄。');

            }            
            $.unblockUI();
        },

        error: function (error) {
            console.log(error);
            alert('出現意料之外的錯誤，請查看F12的writeLog()紀錄。');

        },

    });
    
}

2023/07/21  補充part3:
jquery的blockUI官網的demo區域示範了更好用的"blockui, unblockui應用在ajax"的方式，完美了解決了這個問題"blockui還沒在畫面上出現特效，就已經被unblockui解除掉了"，比起part2的非同步解法更好用，關鍵字就是"OnBlock"，OnBlock裡面的程式碼會在blockui的特效完全出現之後，才會執行！

function YourCodeStartHere()
{
    $.blockUI({
        message: '<h1>處理中請稍候…</h1>',
        theme: false,
        baseZ: 2000,
        //官網內建的complete event
        //, 比起之前介紹的非同步方式解法更好用
        onBlock: function () {
            YourAjaxFunc();
        }
    });
    
    
}

function YourAjaxFunc() {
    var appPath = '@Url.Content("~/")';
    $.ajax({
        type: 'POST',
        url: appPath + 'YourController/YourAjaxFunc/',
        data: formJSON,

        success: function (resultData) {
            if (resultData.IsSuccess == true) {
                alert('存檔成功!');                
            }
            else {
                console.log(resultData.ErrorMsg);
                alert('出現意料之外的錯誤，請查看F12的writeLog()紀錄。');

            }            
            $.unblockUI();
        },

        error: function (error) {
            console.log(error);
            alert('出現意料之外的錯誤，請查看F12的writeLog()紀錄。');

        },

    });
    
}

 

參考資料：
工作經驗
jquery ui - blockui over jQueryUI modal dialog - Stack Overflow
JQUERY BlockUI progress image doesn't animate
jQuery BlockUI Plugin - Demo