IT 성장일기

[Javascript] 자바스크립트를 이용해서 예쁜 토스트 메시지 만들기 본문

Script/Javascript

[Javascript] 자바스크립트를 이용해서 예쁜 토스트 메시지 만들기

고 양 2024. 10. 10. 19:30
반응형
자바스크립트를 이용해서 예쁜 토스트 메시지 만들기

꼭 알러트를 띄워야만 할까?

좋아요를 누르거나 클립보드에 무언가를 복사하는 등 사용자 이벤트가 발생할 때 알림을 보내기 위해 alert 함수를 이용한다면

모달창을 닫지 않으면 다른 행동을 할 수 없기 때문에 사용자의 입장에서는 굉장히 불편합니다.

 

사용자에게 무언가를 요구하지 않고 화면 한 쪽에 스르륵 나타났다가 사라지는 알림을 토스트 메시지라고 하죠.

HTML이나 CSS 코드 추가 없이 스크립트만으로 심플한 토스트 메시지를 띄우는 방법을 정리해 보겠습니다.

Javascript

코드는 어렵지 않습니다. 스크립트를 통해 스타일과 HTML 요소를 정의한 후 필요한 곳에서 함수를 호출하기만 하면 됩니다.

선언부

function toastOn(text){ //내용을 매개변수로 받음
    if (!document.getElementById('toastStyles')) {
        addToastStyles(); //document에 toast와 관련된 스타일이 정의되어 있는지 확인
    }

    const toast = document.createElement('div'); //document에 토스트를 위한 요소 생성
    toast.id = 'toast';
    toast.innerText = text;

    document.body.appendChild(toast); //document에 토스트를 위한 요소 추가

    setTimeout(() => {
        toast.classList.add('show');
    }, 10); //버튼 클릭 후 10 밀리초 후 토스트 노출

    setTimeout(function(){
        toast.classList.remove('show');
        setTimeout(() => {
            document.body.removeChild(toast);
        }, 500);
    },3000); //버튼 클릭 후 3초 후 토스트 제거
}

/* define style sheet */
function addToastStyles() {
    const style = document.createElement('style');
    style.innerHTML = `
        #toast {
            visibility: hidden;
            min-width: 250px;
            background-color: #333;
            color: #fff;
            text-align: center;
            border-radius: 5px;
            padding: 16px;
            position: fixed;
            z-index: 1;
            bottom: 30px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 17px;
            opacity: 0;
            transition: opacity 0.5s ease, visibility 0.5s ease;
        }

        #toast.show {
            visibility: visible;
            opacity: 1;
        }
    `;
    document.head.appendChild(style); // <head>에 <style> 추가
}

사용예제

<link rel="stylesheet" type="text/css" href="resources/css/font.css">
<button onclick='toastOn("표시하고 싶은 내용")'>

결과

테스토스테론

마치며

아래 파일을 내려받아서 프로젝트에 추가하신 후 사용하시길 바랍니다.

감사합니다!

toast.js
0.00MB

반응형
저작자표시 비영리 변경금지 (새창열림)

'Script > Javascript' 카테고리의 다른 글

[Javascript] 정규식으로 이름과 휴대전화번호 유효성 검증하기  (4) 2024.10.30
[Javascript] Clipboard API와 execCommand를 이용해 텍스트 복사하기  (1) 2024.10.10
[Javascript] SNS 공유하기  (5) 2024.10.10
[Javascript] 뒤로가기를 통해 페이지로 돌아왔을 때 함수 실행하기  (0) 2024.09.19
[Javascript] 디스트럭처링 문법(Destructuring Assignment) 파헤치기  (0) 2024.08.13
'Script/Javascript' Related Articles more