[javascript]利用jquery達到遮蔽畫面的效果(blockUI,UnblockUI,Thread.Sleep)

  • 14853
  • 0
  • 2022-04-14

摘要:[javascript]利用jquery達到遮蔽畫面的效果

當然要先引用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>'

2022/04/14補充:
當blockUI在jquery的modal開窗使用時,會出現在modal後面的問題,完全遮不住modal開窗,這時候改成下面這樣寫即可:

 $.blockUI({
        message: '處理中…',
        theme: true,
        baseZ: 2000 });

 

參考資料:
工作經驗
jquery ui - blockui over jQueryUI modal dialog - Stack Overflow