php jquery 彈窗提示框,jQuery實作消息彈出框效果

本文執行個體為大家分享了jQuery消息彈出框的具體代碼，供大家參考，具體内容如下

效果圖

實作代碼

.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("注冊成功",1);

});

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

showMessage("您的網絡已斷開!",0);

});

});

function showMessage(message, type) {

let messageJQ = $("

" + message + " ");

if (type == 0) {

messageJQ.addClass("showMessageError");

} else if (type == 1) {

messageJQ.addClass("showMessageSuccess");

}

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

window.setTimeout(function () {

messageJQ.remove();

}, 3000);

}

正确消息

正确消息

以上就是本文的全部内容，希望對大家的學習有所幫助，也希望大家多多支援。