0
トースト通知を作成しようとしています。ほとんどの場合、コードは十分に機能しています。しかし、私はトースト＃1がページ上部のすべての上に表示されるように、トースト＃2がすべての上に表示されますが、トーストの下に積み重ねられるように、ページ内の他のすべての上に自分のトーストを配置するのに苦労しています＃1、など単純なトースト通知を作成し、上から下へ連続してチェーンします。
ここが私のコードです：
$(document).ready(function() {
$("#btnSuccess").click(function() {
createSuccessToast("everything is fine");
});
$("#btnError").click(function() {
createErrorToast("something went wrong");
});
});
function createSuccessToast(toastMessage) {
createToast(true, toastMessage);
}
function createErrorToast(toastMessage) {
createToast(false, toastMessage);
}
function createToast(isSuccess, toastMessage) {
var toastContainer = createToastContainer(isSuccess);
createToastHeader(toastContainer, isSuccess);
createToastContent(toastContainer, toastMessage);
initToast(toastContainer);
destroyToast(toastContainer);
}
function createToastContainer(isSuccess) {
var toastContainer = $("<div></div>");
toastContainer.addClass("toastContainer");
if (isSuccess) {
toastContainer.addClass("toastContainerSuccess");
} else {
toastContainer.addClass("toastContainerError");
}
return toastContainer;
}
function createToastHeader(toastContainer, isSuccess) {
var toastHeader = $("<div></div>");
toastHeader.addClass("toastHeader");
toastHeader.html(isSuccess ? "Success" : "Error");
toastContainer.append(toastHeader);
}
function createToastContent(toastContainer, toastMessage) {
var toastContent = $("<div></div>");
toastContent.addClass("toastContent");
toastContent.html(toastMessage);
toastContainer.append(toastContent);
}
function initToast(toastContainer) {
toastContainer.hide(function() {
$(document.body).append(toastContainer);
toastContainer.fadeIn(500);
});
}
function destroyToast(toastContainer) {
setTimeout(function() {
toastContainer.fadeOut(500, function() {
toastContainer.remove();
});
}, 5000);
}.toastContainer {
margin-top: 10px;
border-radius: 5px;
font-weight: bold;
padding: 10px;
color: #ffffff;
}
.toastContainerSuccess {
background-color: #99ff33;
}
.toastContainerError {
background-color: #ff1a1a;
}
.toastHeader {}
.toastContent {
margin-top: 10px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btnSuccess">
Success
</button>
<button id="btnError">
Error
</button>私の望ましい結果を達成するために、私は.toastContainerに2つのCSSプロパティを追加しました：
position: absolute;z-index: 1;
しかし、その後、すべての乾杯は、ページ上の正確な同じ場所に出現しますので、複数の乾杯があった場合は、最新の1件のみが見えるだろう。
私は間違っていないよ場合は、通知は、ボタンの上に表示したいですか？ –
はい、あなたは正しいです – Question3r
あなたの質問はよく言われていません。 – Taurus