pgpopup.js

플러그인 사용을 위해선 도메인을 등록해야 합니다.
플러그인을 설치할 사이트의 도메인을 등록 후 사용법에 따라 이용해 주세요.

pgpopup.js

레이어팝업 또는 토스트팝업 구현을 도와주는 플러그인

사용법

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="//work6.kr/plugin/plugin_link/6"></script>

<button id="toast">toast</button>
<button id="layer">layer</button>
<button id="slide">slide</button>

<script>
$(function(){

    $("#toast").click(function(){
        act("toast");
    });

    $("#layer").click(function(){
        act("layer");
    });

    $("#slide").click(function(){
        act("slide");
    });


});

    function act(mode){
        $('body').pgpopup({
                type:mode,                  // 팝업형태 (toast, layer, slide)
                msg:'welcome',             // 메시지
                //padding:'5',              // 여백(px)
                //width:'50%',                // 토스트폭, %로 지정
                //color:'#ffffff',               // 내용 글자색
                //bgcolor:'#111111',        // 레이어 배경색, #111111 와 같이 헥사코드 이용
                //transparency:'0.8',         // 투명도, 0.8 과 같이 값을 입력, 최대 1
                //delay:'1000',                // 얼마의 시간이 지난뒤 사라지게 할것인지 , 1000 = 1초, toast와 slide에만 적용됨
                //time:'1000',                 // 서서히 보여지는 시간, 1000 = 1초
                //direction:'up'               // slide 팝업의 경우 어느방향에서 나타나게 할지의 여부(up,down)
        });
    }
</script>

 

 

 

 

 

 

설치방법

 

1. Line1 : 제이쿼리를 연결합니다.

 

2. Line2 : 플러그인 사용하기 후 도메인을 등록 합니다. 코드를 복사 그리고 붙여넣기 합니다.

 

3. Line4 ~ 6 : 웹 사이트에 맞게 수정 합니다.

 

4. Line8 ~ 40 : 스크립트를 복사 그리고 붙여넣기 합니다.

 

 

 
 
 
 
 
Install

1. Line 1: Connect the jquery.

 

2. Line2: Register the domain after using the plug-in. Copy and paste code.

 

3. Line4 ~ 6: Copy and paste the style. Modify it to fit your website.

 

4. Line8 ~ 40: Copy and paste the script.