일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- CSS
- 홈페이지
- 웹개발자
- PHP
- 플러그인
- work6.kr
- 제이쿼리
- 안드로이드
- jQuery Plugin
- 웹디자이너
- 웹퍼블리싱
- plugin
- 고도몰
- 홈페이지제작
- 프로그래머
- 웹퍼블리셔
- 쇼핑몰제작
- JQuery
- 커스터마이징
- 쇼핑몰
- 쇼핑몰구축
- 3D프린터
- 워크식스
- 웹디자인
- 튜닝
- 개발자
- 사이트제작
- 홈페이지구축
- 포트폴리오
- 웹에이전시
- Today
- Total
그냥 개발자 블로그
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. 워크식스
'소식 > 플러그인소식' 카테고리의 다른 글
swipemenu.js 플러그인 - 모바일웹 좌우 슬라이드 메뉴 효과 (0) | 2016.08.03 |
---|---|
book.js 플러그인 - 책 넘기는 효과 (0) | 2016.08.03 |
dropdownbanner.js - 쇼핑몰 상단배너 플러그인 (2) | 2016.08.02 |
slidebanner.js 플러그인 - 슬라이드 배너 플러그인 (3) | 2016.08.02 |
thinScrollbar.js 플러그인 - 스크롤바 스타일 바꾸기 (0) | 2016.06.07 |