토스트 팝업 ( toast popup )

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

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

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

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

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

손을 조금 더 봐야하지만 일단 내어 놓고 고쳐야 할 부분은 추후 내용 추가분과 함께 수정하겠습니다

내용을 담는 용도일 뿐 내용을 고치는 용도가 아니기에 부담 없이 사용할 수 있습니다

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

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

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

배너 형태로 이미지를 넣을 수 있습니다

다만 이에 대한 링크 제공은 아직 들어 있지 않습니다 다음 수정본을 올릴 때 가급적 추가하겠습니다

다음은 사용법입니다

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

먼저 그누보드의  plugin 폴더 안에 다운 받은 toast_popup 파일을

압축을 풀어 폴더째 plugin 폴더 안에 업로드 합니다

그누보드의 버전은 큰 상관없이 범용으로 사용할 수 있습니다

자신의 홈에서 g5란 이름으로 그누보드를 사용한다면 아래와 같은 형태가 데모 주소입니다

http://본인홈/g5/plugin/toast_popup/demo/toast_popup.html

그누보드의 테마에서 사용을 한다면 아래와 같이 입력하면 됩니다

( 각자의 홈페이지 상황에 따라 안될 수도 있습니다 )

g5/theme/basic/head.sub.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);

위의 소스는  css파일과 js파일을 입력하는 소스이니 위의 것이 여의치 않거나 혹은 다른 곳에 사용을 

원한다면

<link rel="stylesheet" href="http://홈주소/g5/plugin/toast_popup/tyle.css">

<script src="'http://홈주소/g5/plugin/toast_popup/toast_popup.js"></script>

위와 같은 형태로 넣으시면 됩니다

그 이후 호출 함수를 써서 그 아래에 사용하시면 됩니다

<script>
document.addEventListener("DOMContentLoaded", function() {

        toastAlert("success", "사랑하였으므로 행복하였네라");
});

</script>

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

아래는 데모 페이지 주소입니다

http://홈주소/g5/plugin/toast_popup/demo/toast_popup.html

위의 페이지를 열어서 각각의 옵션을 선택해서 실행 했을 때 소스 코드가 텍스트 에리어에 나오니

그 소스를 복사해서 사용하시면 됩니다

실행 버튼 또는 자신이 만든 곳의 실행 소스에 

toastAlert 함수가 연결되면 됩니다

사용하시면서 추가했으면 하는 사항과 고쳐야할 사항이 있으면 반영하겠습니다

프로그램명은 추후 변할 수 있으며

버전은 공개 기준일이 됩니다 

오늘자로 올렸으니  버전 : 20251022

다운 받으시면서 좋은 댓글 한번씩만 남겨 주세요 : )

다운로드 포인트 50점은 댓글 하나가 50점였던거 같은데 그래서 50점입니다 ㅎㅎㅎ

자매품 멀티 업로더(그누보드5 멀티 업로더, 다중 파일 업로더)도 있습니다 

https://sir.kr/g5_plugin/13534