単純なトースト通知を作成し、上から下へ連続してチェーンします。

Question

トースト通知を作成しようとしています。ほとんどの場合、コードは十分に機能しています。しかし、私はトースト＃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プロパティを追加しました：

1. position: absolute;
2. z-index: 1;

しかし、その後、すべての乾杯は、ページ上の正確な同じ場所に出現しますので、複数の乾杯があった場合は、最新の1件のみが見えるだろう。

Answer 1

あなたが代わりにposition: absolute; z-index: 1をあるコンテナ要素に乾杯を追加する必要があります（複数の要素がposition: absoluteであり、彼らは同じ左/トップポジションを持っている場合、彼らは別の最上部に表示されますので、thisを参照してください）：

$(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() { 
 
    $("#toastsContainer").append(toastContainer); 
 
    toastContainer.fadeIn(500); 
 
    }); 
 
} 
 

 
function destroyToast(toastContainer) { 
 
    setTimeout(function() { 
 
    toastContainer.fadeOut(500, function() { 
 
     toastContainer.remove(); 
 
    }); 
 
    }, 5000); 
 
}

#toastsContainer { 
 
    position: absolute; 
 
    top: 0; 
 
    z-index: 1; 
 
    width: 100%; 
 
} 
 

 
.toastContainer { 
 
    margin-top: 10px; 
 
    border-radius: 5px; 
 
    font-weight: bold; 
 
    padding: 10px; 
 
    color: #ffffff; 
 
position: relative; 
 
z-index: 1; 
 
} 
 

 
.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> 
 

 
<div id="toastsContainer"></div>

Answer 2

以下のコードを試してみてください、私はグローバル変数POSを使用している、それに応じて動的にボタンをクリックした後、ボタンの位置を設定し、ボタンフェードアウトした後に戻って移動します前再びポジティブなポジション。

var pos = 80; 
 
$(document).ready(function() { 
 

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

 
document.getElementById("btnSuccess").style.top= ""+pos+"px"; 
 
document.getElementById("btnError").style.top= ""+pos+"px"; 
 
pos = pos + 80; 
 

 
createSuccessToast("everything is fine"); 
 
}); 
 

 
$("#btnError").click(function() { 
 
document.getElementById("btnSuccess").style.top= ""+pos+"px"; 
 
document.getElementById("btnError").style.top= ""+pos+"px"; 
 
pos = pos + 80; 
 
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() { 
 

 
pos = pos - 160; 
 

 
toastContainer.fadeOut(500, function() { 
 
document.getElementById("btnSuccess").style.top= ""+pos+"px"; 
 
document.getElementById("btnError").style.top= ""+pos+"px"; 
 
toastContainer.remove(); 
 
pos = pos + 80; 
 

 
}); 
 
}, 5000); 
 
}

.toastContainer { 
 
bottom:20px; 
 

 
position:relative; 
 
z-index:1; 
 
margin-top: 10px; 
 
border-radius: 5px; 
 
font-weight: bold; 
 
padding: 10px; 
 
color: #ffffff; 
 
} 
 

 
#btnSuccess{ 
 
position:relative; 
 
} 
 
#btnError{ 
 
position:relative; 
 
} 
 
.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>