[jquery]利用jquery的blockui達成訊息自動彈出且自動消失的效果

  • 116
  • 0

[jquery]利用jquery的blockui達成訊息自動彈出且自動消失的效果

利用jquery的blockui達成訊息自動彈出且自動消失的效果

$.blockUI({ 
    
    message: '存檔成功', 
    fadeIn: 700, 
    fadeOut: 700, 
    timeout: 2000, //兩秒之後此訊息框自動消失
    showOverlay: false, 
    centerY: true, 
    theme: false,
    baseZ: 2000,//加上baseZ讓此語法也適用於bootstrap的開窗modal情況
    css: { 
        width: '20%', //訊息框的寬度
        top: '10px', //訊息跟螢幕上方的距離
        left: '', 
        right: '3%', //訊息跟螢幕上方的距離
        border: 'none', 
        padding: '5px', 
        backgroundColor: '#000', 
        '-webkit-border-radius': '10px', 
        '-moz-border-radius': '10px', 
        opacity: .6, //透明度
        color: '#fff'

    } 
}); 	


效果看起來會像是這樣:
出現訊息框之後兩秒就會自動消失喔,提醒一下又不要用很簡陋的alert的時候,很方便!

 

參考資料:
jquery blockui - Demo