本文實(shí)例為大家分享了jQuery消息彈出框的具體代碼，供大家參考，具體內(nèi)容如下

效果圖

實(shí)現(xiàn)代碼

.showMessage {

padding: 5px 10px;

border-radius: 5px;

position: fixed;

top: 45%;

left: 45%;

color: #ffffff;

}

.showMessageSuccess {

background-color: #00B7EE;

}

.showMessageError {

background-color: #ff0000;

}

$(function () {

$("#refresh1").click(function () {

showMessage("注冊(cè)成功",1);

});

$("#refresh2").click(function () {

showMessage("您的網(wǎng)絡(luò)已斷開!",0);

});

});

/**

* 彈出消息提示框，采用瀏覽器布局，位于整個(gè)頁(yè)面中央，默認(rèn)顯示3秒

* 后面的消息會(huì)覆蓋原來(lái)的消息

* @param message：待顯示的消息

* @param type：消息類型，0：錯(cuò)誤消息，1：成功消息

*/

function showMessage(message, type) {

let messageJQ = $("

" + message + "");

if (type == 0) {

messageJQ.addClass("showMessageError");

} else if (type == 1) {

messageJQ.addClass("showMessageSuccess");

}

/**先將原始隱藏，然后添加到頁(yè)面，最后以600秒的速度下拉顯示出來(lái)*/

messageJQ.hide().appendTo("body").slideDown(600);

/**3秒之后自動(dòng)刪除生成的元素*/

window.setTimeout(function () {

messageJQ.remove();

}, 3000);

}

正確消息

正確消息

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持。

總結(jié)

以上是生活随笔為你收集整理的php jquery 弹窗提示框,jQuery实现消息弹出框效果的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。