加入blockUI防止使用者重覆點擊,但在顯示遮罩時發生Gif圖檔的Loading不會動,查詢過後發現是blockUI的支援問題,需先預載圖片,也可利用Div將Loading圖檔隱藏,需要時再利用blockUI顯示。
<script language="javascript">
$.blockUI({
message: $('#divLoading'),
css: {
top: ($(window).height() - 400) /2 + 'px',
left: ($(window).width() - 400) /2 + 'px',
border: 'none',
backgroundColor:'transparent'
}
});
</script>
<div id="divLoading" style="display: none; padding: 15px">
<div style="font-size: 28px; vertical-align: middle; display: inline-block">
<asp:Image ID="imgLoadin" ImageUrl="~/images/loading.gif" runat="server" />
</div>
</div>
參考資料:
http://www.4byte.cn/question/653091/chrome-firefox-doesn-t-display-images-in-objects-shown-in-beforeunload-event.html
http://htmlasks.com/ie8_display_images_chrome_firefox_doesn39_t_display_images_with_blockui
http://stackoverflow.com/questions/20054776/ie8-display-images-chrome-firefox-doesnt-display-images-with-blockui
https://github.com/malsup/blockui/issues/119
<script language="javascript">
$(function() {
$("input[id*=btn]").click(function(){
$.blockUI();
});
});
</script>
<asp:Button ID="btn" runat="server" CssClass="BtnBlue" />
jQuery blockUI 可修改參數表:
$.blockUI.defaults = {
// 顯示的文字內容
message: '<h1>Please wait...</h1>',
title: null, // 標題的文字有時用套板時
draggable: true, // 拖曳.須加在 jQuery UI
theme: false, // 設定 jQuery UI 的套版
// 樣式設計
css: {
padding: 0,
margin: 0,
width: '30%',
top: '40%',
left: '35%',
textAlign: 'center',
color: '#000',
border: '3px solid #aaa',
backgroundColor:'#fff',
cursor: 'wait'
},
// 主題風格
themedCSS: {
width: '30%',
top: '40%',
left: '35%'
},
// 背景圖層
overlayCSS: {
backgroundColor: '#000',
opacity: 0.6,
cursor: 'wait'
},
// 鼠標圖示設定
cursorReset: 'default',
// 樣式運用 $.growlUI
growlCSS: {
width: '350px',
top: '10px',
left: '',
right: '10px',
border: 'none',
padding: '5px',
opacity: 0.6,
cursor: null,
color: '#fff',
backgroundColor: '#000',
'-webkit-border-radius': '10px',
'-moz-border-radius': '10px'
},
// IE 讀取的問題
iframeSrc: /^https/i.test(window.location.href || '') ? 'javascript:false' : 'about:blank',
// 修復IE問題
forceIframe: false,
// z-index 設定
baseZ: 1000,
// 如果都設定為 true 則自動置中
centerX: true,
centerY: true,
// 修復IE問題
allowBodyStretch: true,
// 是否禁止滑鼠事件
bindEvents: true,
// 鍵盤事件
constrainTabKey: true,
// 淡入的時間.單位為毫秒
fadeIn: 200,
// 淡出的時間.單位為毫秒
fadeOut: 400,
// 自動解鎖.單位為毫秒 0為手動解鎖
timeout: 0,
// 是否顯示覆蓋圖層
showOverlay: true,
// 是否設定滑鼠焦點
focusInput: true,
// 淡入完成後執行
onBlock: null,
// 淡出執行
// onUnblock(element, options)
onUnblock: null,
// IE BUG 需要知道詳細請看 http://groups.google.com/group/jquery-en/browse_thread/thread/36640a8730503595/2f6a79a77a78e493#2f6a79a77a78e493
quirksmodeOffsetHack: 4,
// 消息區塊 類別名稱
blockMsgClass: 'blockMsg',
// 是否重複允許封鎖
ignoreIfBlocked: false
};
http://blog.hellocode.info/2012/11/jquery-blockui.html
僅利用Javascript達到相同的類式效果可參考此頁:
https://www.dotblogs.com.tw/joysdw12/archive/2012/12/13/85629.aspx
僅利用Javascript達到相同的類式效果可參考此頁:
https://www.dotblogs.com.tw/joysdw12/archive/2012/12/13/85629.aspx