pgpopup.js - 잠깐 나타났다 사라지는 팝업 플러그인

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

<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 동작을 수정할 경우 위 옵션들을 설정 합니다.

 

 

7. 소스는 여기에서 다운로드 받을수 있습니다.

[문의하기]

copyright ⓒ 2017. 워크식스