// 訊息設定
let popupNotification = null;
const msgHideAfter = 1000;
$(document).ready(function () {
$("body").append("<span id='popupNotification'></span>");
popupNotification = $("#popupNotification").kendoNotification({
autoHideAfter: msgHideAfter,
templates: [{
type: "success",
template: `<div class="msg-success msg">
<span class="k-icon k-i-check-outline"></span>
<span class="msg-text">#= message #</span>
</div>`
}, {
type: "error",
template: `<div class="msg-error msg">
<span class="k-icon k-i-warning"></span>
<span class="msg-text">#= message #</span>
</div>`
}, {
type: "info",
template: `<div class="msg-info msg">
<span class="k-icon k-i-information"></span>
<span class="msg-text">#= message #</span>
</div>`
}]
}).data("kendoNotification");
});
// 顯示訊息
function showSuccessMsg(message, callback = null) {
popupNotification.show({
message: message
}, "success");
if (ifFunctionExist(callback))
{
callback();
}
}
function showErrorMsg(message, callback = null) {
popupNotification.show({
message: message
}, "error");
if (ifFunctionExist(callback)) {
callback();
}
}
function showInfoMsg(message, callback = null) {
popupNotification.show({
message: message
}, "info");
if (ifFunctionExist(callback)) {
callback();
}
}
CSS
.msg {
width: auto;
font-size: 25px;
color: white;
cursor: pointer;
}
.msg .k-icon {
font-size: 25px;
padding-left: 15px;
}
.msg-success {
background-color: rgb(131, 185, 54);
}
.msg-error {
background-color: rgb(246, 75, 47);
}
.msg-info {
background-color: rgb(47, 169, 246);
}
.msg-text {
margin-left: -10px;
padding-right: 10px;
}
沒有留言:
張貼留言