그냥 개발자 블로그

공지용 레이어팝업 간단 구현 제이쿼리(jquery) 플러그인 본문

소식/플러그인소식

공지용 레이어팝업 간단 구현 제이쿼리(jquery) 플러그인

마음이파파 2015. 9. 21. 20:11

웹에서 팝업창이 보안및 사용자의 편의를 방해하는 골치거리가 되어 버리면서


최근 추세는 새로운 창으로 팝업을 띄우기 보다 


꼭 필요할때를 제외하고는 자바스크립트를 통해 레이어팝업을 띄우는게 유행이죠.


그래서 사이트 이용자에게 알리기위한 공지를 레이어팝업으로 많이 이용하는데요.







하지만 레이어 팝업을 만들기란 여간 까다로운게 아니죠.


왠만한 동작은 자바스크립트로 구현을 해야하며


요즘 필수인 오늘은 그만 보기 기능을 위해서


쿠키도 다룰줄 알아야죠.


하지만 이모든게 귀찮다면 간편하게 구현을 목적으로 제작한


notipopup.js 제이쿼리(jquery) 플러그인을 이용해보세요.








notipopup.js 제이쿼리(jquery) 플러그인 테스트 영상이에요.


테스트에 사용된 예제는 아래와 같아요.








<style>

.button{text-align:center; background:#eee; height:20px; line-height:20px;}

</style>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script src="notipopup.js"></script>


<script>

$(function(){

$('#notipopup').notipopup({

startX:'20%',

startY:'10%',

clse:'.close',

todayclose:'.todayclose',

                   code:'notipopup'

});

});

</script>


<body>

<div id="notipopup">

<div>

<h1><!-- 공지내용 --></h1>

<div class="todayclose">TODAY CLOSE</div>

<div class="close">CLOSE</div>

</div>

</div>

</body> 



먼저 입맛에 따라 팝업을 퍼블리싱해주시는데요.


<body>태그 안쪽 시작 부분이나 또는 끝나는 부분에 해주시면되요.


id는 원하시는대로 작성해주시고요.


'오늘은 그만보기'와 '닫기' 버튼에 클래스를 원하는걸로 넣어주세요.


예제에서는 todayclose와 close가 되겠네요.






 


<style>

.button{text-align:center; background:#eee; height:20px; line-height:20px;}

</style>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script src="notipopup.js"></script>


<script>

$(function(){

$('#notipopup'). notipopup({

startX:'20%',

startY:'10%',

clse:'.close',

todayclose:'.todayclose',

                   code:'notipopup'

});

});

</script>


<body>

<div id="notipopup">

<div>

<h1><!-- 공지내용 --></h1>

<div class="todayclose">TODAY CLOSE</div>

<div class="close">CLOSE</div>

</div>

</div>

</body> 



 


여기 홈페이지 share 영역에서 다운 받은 제이쿼리(jquery) 플러그인을 연결해주시고요. 





 



<style>

.button{text-align:center; background:#eee; height:20px; line-height:20px;}

</style>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script src="notipopup.js"></script>


<script>

$(function(){

$('#notipopup').notipopup({

startX:'20%',

startY:'10%',

close:'.close',

todayclose:'.todayclose',

                   code:'notipopup'

});

});

</script>


<body>

<div id="notipopup">

<div>

<h1><!-- 공지내용 --></h1>

<div class="todayclose">TODAY CLOSE</div>

<div class="close">CLOSE</div>

</div>

</div>

</body> 




문서 로딩이 완료되는 시점에 위와 같이 작성해주시면되요.

 


옵션을 설명드리자면....


startX : 팝업의 초기 가로위치

startY : 팝업의 초기 세로위치

close : '닫기' 버튼으로 사용할 영역의 아이디 또는 클래스

todayclose : '오늘은 그만보기' 버튼으로 사용할 영역의 아이디 또는 클래스 

code : 쿠키에 저장될 코드 (해당코드 유무로 팝업을 나타낼지 안나타낼지 결정 되요.)






notipopup.js는 워크식스 홈페이지 share 영역에서 공유되고 있고요.


그 외에도 많은 제이쿼리(jquery) 플러그인이 공유되고 있으니 한번 구경해보세요.




저작자표시 비영리 변경금지

'소식 > 플러그인소식' 카테고리의 다른 글

드래그앤드롭 제이쿼리(jquery) 플러그인  (0) 2015.09.21
모바일용 회전메뉴 제이쿼리(jquery) 플러그인  (0) 2015.09.21
모바일웹에서 숨김메뉴 구현 제이쿼리(jquery) 플러그인  (0) 2015.09.21
sns공유하기 추가 제이쿼리 플러그인  (2) 2015.09.21
남은 시간 표시하는 제이쿼리 플러그인 (jquery plugin)  (0) 2015.09.21
'소식/플러그인소식' Related Articles more