정보/블로그 운영팁

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

아미넴 2021. 2. 20.

클립보드 내용 복사 완료 문구를 단순하게 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>

     

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

     

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

     

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

     

     

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

     

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

     

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

    목차를 클릭하면 해당위치로 바로 가는 기능까지는 지원이 되어 문제가 없는데, 문득 목차 링크를 클릭 한번으로 복사 가능하면 좋을 것 같다는 생각이 들어서 개발하게 되었습니다. 목차 작업

    sangminem.tistory.com

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

     

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

    공감을 눌러 주신 분들께 감사한 마음을 전달하고자 생각한 방법입니다. 복잡하지 않은 내용이므로 쉽게 따라 하실 수 있습니다. 목차 토스트 기능 만들기 사실 토스트 기능을 좀 더 전파하고

    sangminem.tistory.com

     

    반응형

    댓글2

    💲 추천 글