티스토리 토스트 알림 팝업 기능 만들기

클립보드 내용 복사 완료 문구를 단순하게 alert 창을 이용하여 띄웠더니 너무 없어 보여서 간단하게 구현하였습니다.

 

목차

 

HTML 작성

관리 페이지 > 꾸미기 > 스킨 편집 으로 이동합니다.

 

html 편집을 클릭합니다.

 

그럼 위와 같은 HTML 에디터가 뜨는데 여기에서 작업을 해 보겠습니다.

 

다음 내용을 body 태그 안쪽 아무데나 작성 하시면 됩니다.

<!-- 토스트 메시지 -->
<div id="toast" class="toast-wrap" style="display:none;">
    <div class="toast"></div>
</div>

먼저 토스트 메시지를 띄울 영역을 잡았습니다. 최초에는 보이지 않아야 하므로 display 속성에 none을 설정합니다.

 

자바스크립트 작성

관리 페이지 > 꾸미기 > 스킨 편집 > html 편집 > HTML 에디터 로 이동하여 body 태그 안쪽 제일 하단 붙여넣기 하시면 됩니다.

 

toast는 메시지가 잠깐 보였다가 사라지는 것이 핵심입니다. jQuery를 이용하여 다음과 같이 간단히 구현이 가능합니다.

<script>
    var msgTimer = 0;
    function showToast(msg, slot) {
        clearToast();

        var toast = $('#toast');

        if(slot == 'top') {
            toast.css('top', '33px');
            toast.css('bottom', '');
        } else if(slot == 'bottom') {
            toast.css('top', '');
            toast.css('bottom', '-13px');
        } else {
            toast.css('top', '50%');
            toast.css('bottom', '');
        }

        toast.children().html(msg);
        setTimeout(function() {
            toast.fadeIn(500, function() {
                msgTimer = setTimeout(function() {
                    toast.fadeOut(500);
                }, 1000);
            });
        }, 200);
    }
    
    function clearToast() {
        if(msgTimer != 0) {
            clearTimeout(msgTimer);
            msgTimer = 0;
        }
    }
</script>

보였다 사라지는 효과는 Fade In, Fade Out으로 구현하였으며 setTimeout과 clearTimeout 메서드를 적절히 활용하여 중복 호출 시에도 문제 없도록 하였습니다. 그리고 slot 파라미터를 두어 필요에 따라 상단(top), 하단(bottom), 중앙(middle)에 위치할 수 있도록 하였습니다.

 

CSS 작성

관리 페이지 > 꾸미기 > 스킨 편집 > html 편집 > CSS 탭으로 이동합니다.

 

다음은 toast 스타일인데 css 문법을 조금만 익히셔서 원하는 스타일대로 알맞게 수정하여 사용하시기 바랍니다.

.toast-wrap {
    display: table;
    position: fixed;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    padding: 10px;
    border-radius: 5%;
    z-index: 999;
}
.toast-wrap::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height:100%;
    background: #b0d197;
    opacity: 0.5;
    z-index: -1;
    border-radius: 10px;
}
.toast {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    font-weight: bold;
    font-size: 1.2em;
}

 

불투명한 배경을 원하시면 toast-wrap 클래스에 다음 내용을 추가하시면 됩니다.

.toast-wrap {
    /* 생략 */
    background: #fff;
    border-radius: 10px;
}

 

예제 및 결과

다음은 테스트 코드이므로 따라 작성하실 필요는 없습니다. 실제 필요한 곳에 작성하시면 됩니다.

<script>
    function testToast() {
        showToast("클립보드 복사 완료!");
    }
</script>

 

실행을 하면 다음과 같은 팝업 알림이 보였다 사라집니다.

 

영상으로도 확인을 해 보겠습니다.

 

유용하게 사용하시길 바랍니다 :)

 

 

토스트 기능을 아래와 같이 다양한 곳에 활용해 보세요!

 

티스토리 목차 링크 클립보드 복사하기

티스토리 목차 링크 클립보드 복사하기

티스토리 공감 클릭 시 고마움 표시하기

티스토리 공감 클릭 시 고마움 표시하기