249. (JavaScript) [alertify 라이브러리] - alertifyjs 사용해 토스트 (toast) 메시지 커스텀 변경 실시

---

[개발 환경 설정]

​

개발 툴 : Edit++

개발 언어 : JavaScript

 

---

[소스 코드]

​

    <!-- 내부 CSS 스타일 지정 -->
    <style>
        .alertify-notifier .ajs-message {
            background: rgba(255, 255, 255, 0.95);
            color: #000;
            text-align: center;
            border: solid 1px #ddd;
            border-radius: 2px;
            text-align: center;
        }
        .alertify-notifier .ajs-message.ajs-success {
            color: #fff;
            background: rgba(91, 189, 114, 0.95);
            text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.5);
            text-align: center;
        }
        .alertify-notifier .ajs-message.ajs-error {
            color: #fff;
            background: rgba(217, 92, 92, 0.95);
            text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.5);
            text-align: center;
        }
        .alertify-notifier .ajs-message.ajs-warning {
            background: rgba(252, 248, 215, 0.95);
            border-color: #999;
            text-align: center;
        }
    </style>




    <!-- [CDN 설정 실시] -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/AlertifyJS/1.13.0/css/alertify.css"/>
    <script src="https://code.jquery.com/jquery-latest.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/AlertifyJS/1.13.0/alertify.js"></script> 





    <!-- [내부 자바스크립트 J쿼리 이벤트 지정] -->
    <script>
        

        /*
        -----------------------------------------
        [요약 설명]
        -----------------------------------------
        1. window.onload : 웹페이지 로드 완료 상태를 확인합니다
        -----------------------------------------
        2. alertifyjs : 브라우저 대화 상자 및 알림을 이쁘게 표시해주는 자바스크립트 라이브러리 입니다
        -----------------------------------------
        3. alertifyjs 는 기본 브라우저 대화 상자를 대체할 뿐만 아니라 자신만의 대화 상자를 매우 쉽게 만들 수 있습니다
        -----------------------------------------
        4. 참고 사이트 : 

        https://alertifyjs.com/

        https://alertifyjs.com/guide.html

        https://www.cdnpkg.com/AlertifyJS

        https://alertifyjs.com/notifier/dismissAll.html

        https://alertifyjs.com/notifier/delay.html

        https://stackoverflow.com/questions/34289346/how-to-change-the-font-color-in-alertify-error-using-alertify-js

        -----------------------------------------
        */






        // [html 최초 로드 및 이벤트 상시 대기 실시] 
        window.onload = function() {
            console.log("");
            console.log("=========================================");
            console.log("[window onload] : [start]");
            console.log("=========================================");
            console.log(""); 


            // [테스트 함수 호출]
            testMain();
        };





        // [자바스크립트 테스트 코드]
        function testMain(){
            console.log("");
            console.log("=========================================");
            console.log("[testMain] : [start]");
            console.log("=========================================");
            console.log("");


            // [토스트 표시 지속 시간 설정]
            //alertify.set('notifier','delay', 5);


            // [토스트 메시지 위치 설정]
            alertify.set('notifier','position', 'bottom-center');


            // [success : alertify 토스트 메시지 호출]
            alertify.success('Success Message'); 

            // [error : alertify 토스트 메시지 호출]
            // alertify.error('Error Message'); 


            // [warning : alertify 토스트 메시지 호출]
            // alertify.warning('Warning Message'); 
        };


    </script>

 

---

[결과 출력]

​

---