- 정보공유
[JQUERY] 중앙 토스트 레이어 , 버튼을 클릭하면 화면 중앙에 3초간 보였다가 fadeout 되는 레이어창.
<button id="btnToast">토스트 띄우기</button>
<style>
.center-toast {
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 9999;
max-width: min(90vw, 640px);
width: max-content;
padding: 14px 18px;
border-radius: 12px;
background: rgba(0,0,0,0.82);
color: #fff;
font-size: 15px;
line-height: 1.4;
text-align: center;
word-break: keep-all;
box-shadow: 0 8px 28px rgba(0,0,0,0.25);
display: none; /* 처음엔 숨김 */
}
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(function(){
// 토스트 DOM을 body에 추가
if ($("#centerToast").length === 0) {
$("body").append('<div id="centerToast" class="center-toast"></div>');
}
function showCenterToast(msg, duration = 3000) {
var $toast = $("#centerToast");
$toast.stop(true, true); // 이전 애니메이션 중단
$toast.text(msg).fadeIn(300);
// duration 후에 fadeOut
setTimeout(function(){
$toast.fadeOut(600);
}, duration);
}
// 버튼 테스트용
$("#btnToast").on("click", function(){
showCenterToast("저장되었습니다", 3000);
});
});
</script>