pgpopup.js

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

샘플영상

다운로드

pgpopup.js V2.0 다운로드

설치/사용법

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="/js/pgpopup.js"></script>


<script>
    function act1(){
        $('body').pgpopup({
            type:'toast',
            msg:'welcome'
        });
    }
</script> 

 

1. 제이쿼리가 설치가 필요합니다.

 

 

 

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="/js/pgpopup.js"></script>


<script>
    function act1(){
        $('body').pgpopup({
            type:'toast',
            msg:'welcome'
        });
    }
</script> 

 

2. 다운로드한 플러그인을 설치합니다.

 

 

 

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="/js/pgpopup.js"></script>


<script>
    function act1(){
        $('body').pgpopup({
            type:'toast',
            msg:'welcome'
        });
    }

</script> 

 

3. 위와 같이 원하는 함수명으로 함수를 만듭니다.

 

 

 

 

$('body').pgpopup({
        type:'toast',                  // 팝업형태 (toast, layer, slide)
        msg:'welcome',             // 메시지
        padding:'5px',              // 여백
        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)
});

 

4. 필수 옵션을 설정 합니다.

 

 

 

 

$('body').pgpopup({
        type:'toast',                  // 팝업형태 (toast, layer, slide)
        msg:'welcome',             // 메시지

        padding:'5px',              // 여백
        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)

});

 

5. 디자인 수정이 필요한 경우 디자인 옵션을 설정 합니다.

 

 

 

 

$('body').pgpopup({
        type:'toast',                  // 팝업형태 (toast, layer, slide)
        msg:'welcome',             // 메시지

        padding:'5px',              // 여백
        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)
});

 

6. toast 또는 slide 동작을 수정할 경우 위 옵션들을 설정 합니다.

 

 

 

 

 

플러그인 설치/보수는 무료로 지원 하지 않습니다.
위로

잠시만 기다려주세요.