加入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