JQuery彈出提示框定時自動消失

標籤：成功   define   代碼實現   timeout   idg   round   info   app   div   

運行效果：

用div而非setTimeout()，在頁面中央顯示提示，1.5秒後消失，不影響頁面的正常布局。

1. HTML代碼

HTML代碼顯示提示內容，放在頁面中任何位置。

<div class="alert"></div>

實際運行中其它置中參考

<div class="alert" style="height:50px;line-height:50px;font-size:14px;width:65%;margin:auto;position:absolute;top:0;left:0;bottom:0;right:0;"></div>

2. CSS代碼

彈出框參考了 Bootstrap 的樣式：

.alert {    display: none;    position: fixed;    top: 50%;    left: 50%;    min-width: 200px;    margin-left: -100px;    z-index: 99999;    padding: 15px;    border: 1px solid transparent;    border-radius: 4px;}.alert-success {    color: #3c763d;    background-color: #dff0d8;    border-color: #d6e9c6;}.alert-info {    color: #31708f;    background-color: #d9edf7;    border-color: #bce8f1;}.alert-warning {    color: #8a6d3b;    background-color: #fcf8e3;    border-color: #faebcc;}.alert-danger {    color: #a94442;    background-color: #f2dede;    border-color: #ebccd1;}

3. Javascript代碼

首先，載入JQuery，然後用下面代碼實現1.5秒後淡出效果：

$(‘.alert‘).html(‘操作成功‘).addClass(‘alert-success‘).show().delay(1500).fadeOut();

還可結合關閉視窗代碼：

//關閉網頁window.opener = null;window.open(‘‘, ‘_self‘);window.close();//關閉網頁setTimeout("WeixinJSBridge.call(‘closeWindow‘)", 1000);                    

 

如果不想在HTML中加DIV，可以直接用JS把DIV添加到頁面中，如下：

$(‘<div>‘).appendTo(‘body‘).addClass(‘alert alert-success‘).html(‘操作成功‘).show().delay(1500).fadeOut();

一般情況下，如果這個方式使用得很頻繁，寫成函數可以提高複用：

/** * 彈出式提示框，預設1.2秒自動消失 * @param message 提示資訊 * @param style 提示樣式，有alert-success、alert-danger、alert-warning、alert-info * @param time 消失時間 */var prompt = function (message, style, time){    style = (style === undefined) ? ‘alert-success‘ : style;    time = (time === undefined) ? 1200 : time;    $(‘<div>‘)        .appendTo(‘body‘)        .addClass(‘alert ‘ + style)        .html(message)        .show()        .delay(time)        .fadeOut();};// 成功提示var success_prompt = function(message, time){    prompt(message, ‘alert-success‘, time);};// 失敗提示var fail_prompt = function(message, time){    prompt(message, ‘alert-danger‘, time);};// 提醒var warning_prompt = function(message, time){    prompt(message, ‘alert-warning‘, time);};// 資訊提示var info_prompt = function(message, time){    prompt(message, ‘alert-info‘, time);};

 

JQuery彈出提示框定時自動消失