<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.