TOP

[jQuery] blockUI動態GIF檔未正確顯示

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

TOP

[jQuery] 利用jQuery blockUI防止使用者重覆點擊


<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 
};

參考資料: