jQuery彈出提示信息自動消失簡潔版


// 在bootstrap中可以,可以使用如下方式實現彈出提示信息自動消失,如果沒有使用bootstrap框架,可以自定義樣式

//
tip是提示信息,type:'success'是成功信息,'danger'是失敗信息,'info'是普通信息,'warning'是警告信息 function ShowTip(tip, type) { var $tip = $('#tip'); if ($tip.length == 0) { // 設置樣式,也可以定義在css文件中 $tip = $('<span id="tip" style="position:fixed;top:50px;left: 50%;z-index:9999;height: 35px;padding: 0 20px;line-height: 35px;"></span>'); $('body').append($tip); } $tip.stop(true).prop('class', 'alert alert-' + type).text(tip).css('margin-left', -$tip.outerWidth() / 2).fadeIn(500).delay(2000).fadeOut(500); } function ShowMsg(msg) { ShowTip(msg, 'info'); } function ShowSuccess(msg) { ShowTip(msg, 'success'); } function ShowFailure(msg) { ShowTip(msg, 'danger'); } function ShowWarn(msg, $focus, clear) { ShowTip(msg, 'warning'); if ($focus) {      $focus.focus();   if (clear) $focus.val('');    } return false; }

 效果圖如下

3s后會自動消失,比原生的alert()體驗更好

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM