웹 토스트 메시지 추가하기 - 범상치 않은 블로그

웹 페이지에서 글을 복사할 때 출처 요청 차원에서 토스트 메시지를 추가하였습니다.

토스트처럼 보이도록 클래스를 추가하고 3초(3000) 뒤에 다시 클래스를 빼도록 하는 자바스크립트를 추가합니다.

//토스트
let beomToastMessage = document.getElementById('beom_toast_message');
beomToastMessage.classList.add('active');
setTimeout(function(){
    beomToastMessage.classList.remove('active');
},3000);

스타일을 꾸며보겠습니다.

#beom_toast_message {
    opacity: 0;
    position: fixed;
    bottom: -100px;
    left: 50%;
    transform: translate(-50%,0);
    padding: 10px 50px;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 100px;
    color: #fff;
    box-shadow: 3px 4px 10px 0px #00000040;
    transition: all 0.5s;
    z-index: 9999;
}

잠시 불투명도를 100%로 하고, 하단 20% 위치에 표시하도록 함.

#beom_toast_message.active {
    opacity: 100%;
    bottom: 20%;
}

바디 부분에 대상 div 태그를 추가합니다.

<div class='nothing' id='beom_toast_message'>가져가실 때, 출처 표시 부탁드려요! 감사합니다. 💗</div>