자바스크립트 페이지 로딩시 팝업띄우기, 하루만 띄우기, 팝업 관리
팝업창 관리를 통한 페이지 로딩시 팝업창을 띄우는 방법과
쿠키를 활용해 하루동안 팝업을 띄우지 않는 방법에 대해 알아보자.
우선 팝업관리에 필요한 컬럼은 아래와 같다.
--popup table
POP_NO 팝업일련번호
TITLE 제목
CONTENT 내용
START_DAY 게시시작일자
END_DAY 게시종료일자
POP_WIDTH 팝업넓이
POP_HEIGHT 팝업높이
POP_LOC_LEFT 팝업위치(LEFT)
POP_LOC_TOP 팝업위치(TOP)
FILE_FLAG 파일유무
기본적인 등록일자, 수정일자 이런건 제외 했다.
팝업 넓이와 높이는 팝업창의 크기를 조절하기 위한 값이고
팝업위치 LEFT, TOP은 팝업창이 띄워지는 위치를 설정하기 위한 값이다.
※현재 일자가 게시시작일자와 게시종료일자 사이에 존재할 경우에만 데이터를 가져온다.
쿼리는 생
이제 자바스크립트로 팝업창을 구현해보자.
-- main.jsp
페이지 로딩시 띄울 팝업이 있는지 ajax를 사용해 조회한다.
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 |
$(function(){
getPopup();
});
function getPopup(){
$.ajax({
type : 'POST',
dataType : 'json',
url : '${ctx}/getPopup.do',
success : function(returnData){
if(returnData.resultCode==200){
var data = returnData.rows;
if(data.length > 0){ //띄울 팝업이 있다면
for(var k=0; k<data.length; k++){ //갯수만큼 팝업을 띄운다.
OpenPopup(k, data[k].popNo, data[k].popWidth, data[k].popHeight, data[k].popLocLeft, data[k].popLocTop);
}
}
}else if(returnData.resultCode==300){
alert("팝업정보를 가져오는데 실패하였습니다.");
};
}, error: function(e){
if(e.status==300){
alert("팝업정보를 가져오는데 실패하였습니다.");
};
}
});
}
|
cs |
비동기 방법으로 기간내에 존재하는 팝업의 데이터를 가져와서
openPopup이라는 함수를 데이터 갯수만큼 실행하고 있다.
openPopup함수를 보자.
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 |
function OpenPopup(index, value, width, height, left, top){
var now = new Date();
var year= now.getFullYear();
var mon = (now.getMonth()+1)>9 ? ''+(now.getMonth()+1) : '0'+(now.getMonth()+1);
var day = now.getDate()>9 ? ''+now.getDate() : '0'+now.getDate();
var chan_val = year + '-' + mon + '-' + day; //날짜데이터생성
var cookieValue = getCookie("쿠키명"+value); //쿠키데이터 가져오기
var bool = true;
if(cookieValue!=""){
var list = cookieValue.split("exit;");
if(list.length>0){
for(var k=0; k<list.length; k++){
var data = list[k].split("=");
if(data[k].indexOf("쿠키명"+value)!=-1 || data[k].indexOf(chan_val)!=-1){
bool=false; //팝업이 뜨지 않도록 한다.
}
}
}
}
if(bool){
var winPop;
winPop = window.open('${pageContext.request.contextPath}/mainPopup.do?popNo='+value,'pop'+index,'toolbar=yes,width='+width+',height='+height+',left='+left+',top='+top+',status=yes,scrollbars=no, resize=yes, toolbar=no, location=no');
winPop.focus();
}
return;
}
|
cs |
|
|
function getCookie(name){
var cookie_string = document.cookie ;
return decodeURIComponent ( cookie_string ) ;
}
|
cs |
우선 날짜데이터를 만들었다. 이는 '하루동안 보지않기' 기능을 추가하기 위해서다.
그 후 getCookie 함수를 사용해 쿠키값을 가져왔다.
쿠키값이 있다면('하루동안 보지않기'를 했다면) 팝업을 띄우지 않고
반대면 팝업을 띄우는 방식이다.
팝업을 띄우는데는 window.open 을 사용했다.
window.open('url주소', '팝업창이름', '나머지 옵션);
앞의 getPopup.do로 호출한 controller는 json 형식으로 값을 리턴하고
mainPopup.do로 호출한 팝업창은 model을 사용해 데이터를 받는다.
-- 띄워진 팝업창.jsp
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19 |
<body>
<div id="pop">
<h1>${popup.title}</h1>
<section>
${popup.content}
<img src="../images/@map.jpg" alt=""/>
<!-- 이미지가 존재한다면 사용
<c:if test="${popup.file_flag }">
<img alt="${popup.pop_title }" src=<c:url value="getImage.do?file_route=${popup.file[0].route }&file_name=${popup.file[0].save_name}&extension=${popup.file[0].file_extension }"/> />
</c:if>
-->
</section>
</div>
<div class="btn">
<button type="button" onClick="javascript:setCookie(${popup.popNo })">닫기</button><br><br>
<p class="pop_footer"><em class="close"><input type="checkbox" class="check" id="noToday">오늘은 더 이상 보지않겠습니다.</em> <span class="btn"></span></p>
</div>
</body>
|
cs |
|
|
function setCookie(index){
if($('input:checkbox:checked').val()=="on"){
var now = new Date();
var year= now.getFullYear();
var mon = (now.getMonth()+1)>9 ? ''+(now.getMonth()+1) : '0'+(now.getMonth()+1);
var day = now.getDate()>9 ? ''+now.getDate() : '0'+now.getDate();
var chan_val = year + '-' + mon + '-' + day;
document.cookie = 'GangneungBIS'+index + "=" + encodeURIComponent( chan_val+", exit" );
}
this.close();
}
|
cs |
'오늘은 더 이상 보지않겠습니다.' 의 체크박스를 선택하고 닫으면 쿠키값을 수정한다.
그래서 페이지 로딩시 쿠키 값이 존재하면 팝업을 띄우지 않는것이다.
팝업관리는 관리자의 필수 기능이다. 확실하게 이해하고 구현해보도록 하자.
댓글