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