토스트 팝업 ( toast popup ver 20251129 ) > 그누보드5 플러그인

그누보드5 플러그인

그누보드 호환이거나 독립적으로 실행되는 플러그인을 소개합니다.

토스트 팝업 ( toast popup ver 20251129 ) 정보

토스트 팝업 ( toast popup ver 20251129 )

첨부파일

toast_popup_20251129.zip (1.4M) 13회 다운로드 2025-11-29 22:17:12 포인트 차감50
테스트한 버전5.6.23
호환 가능 버전5.4

본문

 

토스트 팝업이란 전달해야 할 메세지등이 있을 때 우측 하단에서 서서히 올라오는

간단한 내용을 담는 팝업등을 말합니다

 

모양새가 토스터기에서 식빵이 구워져 올라오는 모양 같다해서 토스트 팝업이라 불리우고 있습니다

요즘은 휴대폰에서는 기본으로 사용되며 많은 사이트에서 간편하게 내용이나 

시스템적인 메세지를 전달할 때 많이 사용되고 있습니다

 

자바스크립트의 알러트와 비슷한 느낌으로 사용하시면 됩니다

예를 들면  아작스등으로 서버에 접근할 수 있다면 새로운 글이나 쪽지가 있을 때

"새로운 글이 있습니다"와 같은 짧은 내용의 환기용 메세지로 사용할 수 있습니다

 

 


Toast Popup 설치 및 사용법 요약


1. 설치 방법
    설치 1: 플러그인 업로드
        - 다운로드한 파일의 압축을 풉니다.
        - 그 안의 toast_popup 폴더를 그대로 그누보드 plugin 폴더에 업로드합니다.
        - 그누보드 버전과 관계없이 범용 사용 가능.

 

    설치 2: JS 설정 수정
        - 수정 파일: toast_popup/toast_popup.js
             약 63번째 줄에서 serverModuleUrl의 값인 ( http://홈주소/g5/plugin ) 을 
             본인이 설치한 경로로 바꾸세요

        - 옵션 설정:
             defaultOptions: 기본 설정 
                본인의 상황에 맞게 수정 하세요. 호출 함수에 옵션이 있으면 우선적용되고 없으면

                기본설정이 적용됩니다
            minimumOptions: 최소 설정 
                아래의 설치4와 같은 형태처럼 최소 설정을 할때 보여졌으면 하는 설정을

                이 곳에서 하시거나 비워둬도 됩니다

 

    설치 3: CSS/JS 등록 ( 직접 기재시 홈주소는 본인 설치한 홈주소에 맞도록 수정 )
            테마 사용 시 (g5/theme/basic/head.sub.php 예시)

            - 그누보드 php 안에 넣을 때


add_stylesheet('<link rel="stylesheet" href="'.G5_JS_URL.'/font-awesome/css/font-awesome.min.css">', 0);

                위의 소스를 찾아 그 아래에 다음의 소스를 넣으면 됩니다

add_stylesheet('<link rel="stylesheet" href="'.G5_PLUGIN_URL.'/toast_popup/style.css">', 0);
add_javascript('<script src="'.G5_PLUGIN_URL.'/toast_popup/toast_popup.js?ver='.G5_JS_VER.'"></script>', 0);

            위 소스가 없으면 <link>와 <script>를 직접 HTML에 아래와 같이 일반적인 소스로 만들어 넣어도 됩니다

            - 직접 html안에 기재시


<link rel="stylesheet" href="http://홈주소/g5/plugin/toast_popup/style.css">
<script src="http://홈주소/g5/plugin/toast_popup/toast_popup.js"></script>

 

    설치 4: 호출 

<script>
document.addEventListener("DOMContentLoaded", function() {
     toastAlert("success", "사랑하였으므로 행복하였네라");
});
</script>
            사용하는 자바스크립트 기능의 원하는 위치에서 아래의 실행 함수를 넣어서 사용하시면 됩니다
toastAlert("토스트 팝업 타입", "메시지");

            토스트 팝업 타입 종류   


 success, info, warning, error, notification, confirm, custom
 

2. 데모 페이지
    서버 설치시 데모 URL :
    - http://홈주소/g5/plugin/toast_popup/demo/toast_popup.html
    - 옵션 선택후 하단의 [사용자 정의 토스트 팝업] 버튼 클릭시 자동으로 소스 코드가  생성되므로, 
      복사하여 사용 가능.
    - 로컬에서 확인시 폴더를 열어 toast_popup.html를 직접 페이지를 열면 됩니다


3. 버전 정보 및 주의 사항 ( 버전은 업데이트된 날짜를 의미합니다 )
    이전 버전 : 20251022, 20251128
    최신 버전 : 20251129
        - 서버/로컬 주소 변경
        - 아이콘 세트, 크기 추가
        - 데모 페이지 예제 변경
        - 모든 업데이트는 기존 버전을 삭제 후 설치 권장합니다.


4. 기타 안내
    효과음은 웹브라우저 상황에 따라서 나오지 않을 수 있습니다

    브라우저의 포커스가 되어 있는 상태 ( 클릭등이 일어난 이후 )에서만

    웹브라우저 정책에 의해 사운드가 활성화가 됩니다

 

    사용법이 자세하지 않지만, 데모 페이지에서 옵션 체크 후 실행하면 쉽게 이해 가능합니다
    다운 받으시면서 좋은 댓글 한번씩만 남겨 주세요 : )

    다운로드 포인트 50점은 댓글 하나가 50점인데 수고했다는 답글 하나 정도면 괜챦을거 같아

    50점으로 했습니다  ㅎㅎㅎ


    버그나 기타 사항은 검토후 되도록 적용 가능하게 해보겠습니다


   자매품  마리 업로더 ver0.9 ( 그누보드5 멀티 업로더, 다중 파일 업로더 ) 도 있습니다 : )
    https://sir.kr/g5_plugin/13534

 

 

 

다음은 간단한 업데이트 이력입니다 큰변화가 없으면 이 곳에서 변경해서 올리고

큰 변화가 있으면 새로운 파일을 업로드 합니다  - 25년 11월 30일

-----------------------------------------------------------------------------------------------------------

 

간단한 변경이 있어 파일을  11월 29일에 다시 업데이트 했습니다

- ver 20251129

 

- 업데이트 내용

  서버 주소,로컬 주소 변경, 아이콘 셋트 작게 추가, 데모 페이지의 예제 내용 변경

 

- 참고 사항

  다운로드 한 파일은 되도록 이전 파일을 지우고  새로 설치해 주세요

  삭제시 엉뚱한 파일을 지우는 일이 없도록 조심 하세요

 

 

 

 

 

 

추천
7

댓글 전체

감사합니다

최소 옵션인데 보기 좋게 할려면

최소 옵션에 다음과 같이 넣으면 좀 더 나은 형태가 될거 같습니다

        minimumOptions : {
            moveType       : 'move_no',// 슬라이드 이동 방향
            bellPlayedUse  : 'Y',      // 시작시 효과음 사용 여부 (Y/N)
            fadeIn         : 'Y',
            fadeOut        : 'Y', 
            progressBarUse : 'Y', // 프로그레스 바 사용안할시 N

            useCloseBt : 'auto', // 닫기 버튼 없이 자동 닫기
            iconX      : '0px',    // 아이콘 x값 위치
           contentX   : '30px',  // 콘텐츠 x값 위치


          minHeight            : '50px',  // 최소 높이
          minWidth             : '500px', // 최소 넓이
        },

 

위와 같이만 바꿔도 모습이 더 나아질거 같습니다

항상 좋은 피드백 감사합니다 : )

 

아이콘 작게 부분이 추가 될 예정이니 

그 부분을 고쳐서 저녁에 업데이트 하겠습니다

버전명은 오늘 날짜가 될테니 참고하시면 되겠습니다

 

감사합니다 ^^

 

아이콘 작게 부분이 추가 될 예정이니 

그 부분을 고쳐서 저녁에 업데이트 하겠습니다

버전명은 오늘 날짜가 될테니 참고하시면 되겠습니다

늘 좋은 피드백 감사 드립니다 : )

 

아이콘 작게 부분이 추가 될 예정이니 

그 부분을 고쳐서 저녁에 업데이트 하겠습니다

버전명은 오늘 날짜가 될테니 참고하시면 되겠습니다

전체 677
그누보드5 플러그인 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1402호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT