레이어 팝업을 이용한 공지와 쿠키를 활용한 오늘은 그만보기 기능
출처 : https://piterjige.tistory.com/5
웹사이트에 공지를 띄울 필요가 있는 상황이지만,
해당 사이트가 https가 아닌 관계로 웹브라우저에서 팝업을 자꾸 차단하는 경향이 있습니다.
이러한 경우는 레이어 팝업으로 띄워서 해결을 할 수 있다.
검색하면 수많은 예제들이 있는데, 그 중 사용하기 편한 것으로 결정함.
약간 이런느낌.. 저는 안에다 이미지를 넣어서 공지를 하였습니다.
--------------------------------------------------------------------------------------------------------------------
소스 :
<head 부분> : 레이어 팝업 및 오늘은 그만보기에 관련된 스크립트와 그것들을 디자인할 스타일코드
<script>
//생성될 쿠키명
var cookie_name = "popupCookie";
//이벤트 팝업
function openPopup(id, width, height, tpos, lpos){
var divName = document.getElementById(id);
if (getCOOKIE(cookie_name) != true){
divName.style.display = "block";
}else{
divName.style.display = "none";
}
divName.style.width = width + "px";
divName.style.height = height + "px";
divName.style.top = tpos + "px";
divName.style.left = lpos + "px";
}
//팝업 닫기
function closePopup(id){
var divName = document.getElementById(id);
divName.style.display = "none";
}
function getCOOKIE(name){
var Found;
Found = false;
var start, end;
var i = 0;
while(i <= document.cookie.length){
start = i;
end = start + name.length;
if(document.cookie.substring(start, end) == name){
//Found = true;
return true;
break;
}
i++;
}
if(Found == true){
start = end + 1;
end = document.cookie.indexOf(';', start);
if(end < start) end = document.cookie.length;
return document.cookie.substring(start, end);
}
return '';
}
//오늘은 그만보기 선택시 -- setCOOKIE("쿠키명","y",1)
function controlCOOKIE(){
setCOOKIE(cookie_name,"y", 1);
closePopup('layerPop');
}
//쿠키 생성 함수
function setCOOKIE(name, value, expire){
var expire_date = new Date();
expire_date = new Date(expire_date.getTime() + 60*60*24*1000);
document.cookie = name + "=" + escape(value) + "; expires=" + expire_date.toGMTString() +"; path=/";
}
//쿠키 소멸 함수
function clearCOOKIE(name){
var today = new Date();
//어제 날짜를 쿠키 소멸 날짜로 설정한다.
var expire_date = new Date(today.getTime() - 60*60*24*1000);
document.cookie = name + "= " + "; expires=" + expire_date.toGMTString();
}
</script>
<style type="text/css">
#popDiv{
position:absolute;
display:none;
border:1px solid #808080;
background:#3d3d3d;
color:#fff;
}
#popDiv .close{
position:absolute;
bottom:6px;
left:10px;
}
#popDiv .lask{
position:absolute;
right:5px;
}
</style>
--------------------------------------------------------------------------------------------------------------------
<Body 부분> : onload 형태로 페이지 접속하자마자 자동적으로 레이어팝업을 띄우도록 되어 있음.
<body onload="openPopup('popDiv', 255, 330, 200, 50);">
<div id="popDiv">
<a href=공지사항 바로가는 경로"><img src="abc.jpg"></a>
<div style="height:250px;" background:#3d3d3d;>
<span class="close">오늘은 그만보기
<input type="checkbox" onClick="javascript:controlCOOKIE();" />
</span>
<span class="lask">
<a href="#" style="color:#fff;" onclick="closePopup('popDiv')" >[닫기]</a>
</span>
<a href="#" onclick="closePopup('layerPop')" >닫기</a> -->
</div>
</div>
</body>
끝 안에 이미지나 경로등만 수정하면 됩니다.
'IT 전산 > 개발' 카테고리의 다른 글
| (java 개념) 자바 객체와 클래스 이해하기 (0) | 2023.11.17 |
|---|---|
| [초급 연습] C언어 점수 입력받아 학점 반환하는 함수 (1) | 2023.11.14 |
| 7zip으로 파일을 제외한 폴더만 골라서 압축하는 방법 (배치 .BAT) (0) | 2023.09.15 |
| eclipse-inst-jre-win64.exe 실행안됨 or 무반응 해결 (0) | 2023.09.15 |
| 안드로이드 스튜디오 Run (▶) 버튼이 비활성화일 때 활성화 하기 (0) | 2023.09.05 |
