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