ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • pgpopup.js - 잠깐 나타났다 사라지는 팝업 플러그인
    워크식스소식/플러그인소식 2016.08.02 23:57








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

    <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. 워크식스


    댓글 0

work6.kr