摘要:[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