홈페이지 운영을 하다 보면 팝업을 쓸 일이 참 많다.
공지사항이나 특별한 메세지를 전달할 때에는 메인에 뜨는 팝업만큼 효과적인 게 없기 때문이다.
window.open()을 이용해 작은 팝업을 띄울수도 있지만 팝업차단을 하면 막히기에 보편적으론 레이어팝업이 선호되는 편이다.
레이어 팝업 디자인
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<style type="text/css">
#wrapper_popup div[id ^= 'layerPop'] {width:100%;margin:10px;max-width:500px;position:absolute; padding:20px 30px; background:#fff; z-index:100000;border-radius:5px;overflow:auto;display:none}
#wrapper_popup div[id ^= 'layerPop'] h2 {display:block;margin:10px 0 0;padding-bottom:15px;border-bottom:1px #d8d8d8 solid;font-size:1.1em;font-weight:bold}
#wrapper_popup div[id ^= 'layerPop'] p {display:block;padding:20px 0 0;margin:0;font-size:1.0em;line-height:1.5em}
#wrapper_popup div[id ^= 'layerPop'] .hour-close {display:inline-block;padding:8px 20px;background:#f2f2f2;color:#666;border:1px #d8d8d8 solid;border-radius:5px;margin-top:15px}
#wrapper_popup div[id ^= 'layerPop'] .hour-close:hover {background:#54A94C;color:#f8f8f8}
#wrapper_popup div[id ^= 'layerPop'] img.cancel {position:absolute; right:10px;top:10px;zoom:1;filter: alpha(opacity=50);opacity: 0.7}
#wrapper_popup div[id ^= 'layerPop'] img.cancel:hover {zoom:1;filter: alpha(opacity=100);opacity: 1.0}
#wrapper_popup .b-area {width:100%;text-align:right;margin-top:20px;border-top:1px #ccc solid}
#wrapper_popup ul {list-style-type:disc;margin:0 0 20px;line-height:1.5em}
#wrapper_popup .c-green {color:green !important}
#wrapper_popup .c-blue {color:blue !important}
#wrapper_popup .c-red {color:red !important}
.layer-shadow {box-shadow: 0px 3px 15px 0px rgba(0,0,0,0.74);-webkit-box-shadow: 0px 3px 15px 0px rgba(0,0,0,0.74);-moz-box-shadow: 0px 3px 15px 0px rgba(0,0,0,0.74);}
</style>
<div id="wrapper_popup">
<div id="layerPop1" class="layer-shadow">
<h2>팝업창 예제</h2>
<p>
첫번째 팝업입니다.<br><br>
</p>
<ul>
<li><a href="#">홈페이지 바로가기(클릭)</a></li>
<li><a href="#">공지사항보기</a></li>
</ul>
<div class="b-area"><a href="#" onclick="closeNoOpen('layerPop1')" class="hour-close">오늘 하루 열지 않기</a></div>
<a href="#" onclick="closeLayer('layerPop1')"><img class="cancel" src="./cancel.png" alt="X"></a>
</div>
</div>레이어 팝업 디자인을 살펴보자.
여러개의 팝업을 쓰기 위해 id값은 div[id ^= 'layerPop'] 으로 처리한다.
이는 여러개의 팝업을 사용하기 위한 방법인데 layePop1, layePop2, layePop3, layePop4 이라는 id의 div도 style이 적용되게 한다.
팝업창은 가장 위에 보여야 하니 z-index값을 높게 설정하고 미리 보이지 않게 하기 위해 기본 display를 none으로 해준다.
레이어 팝업 열기와 닫기
//팝업 닫기
function closeLayer(IdName){
console.log('closeLayer : '+IdName);
$("#"+IdName).css("display","none");
}
//팝업열기
function openLayer(IdName){
console.log('openLayer : ' + IdName);
$("#"+IdName).css("display","block");
}jquery .css함수를 이용해 display가 none 상태인 숨겨진 div의 display 값을 block으로 변경해 준다.
jascript를 이용하고 싶다면 document.getElementById(elementID).style.display = "block";
이런 식으로 처리해도 무방하다.
쿠키를 이용한 오늘 하루 열지 않기 구현
//오늘하루만 팝업 보지 않기
function closeNoOpen(IdName) {
console.log('closeNoOpon : '+IdName);
setCookie(IdName, "N", 1);
closeLayer(IdName);
}
//쿠키 담기
function setCookie(IdName, value, expiredays) {
console.log('setCookie : '+IdName);
var date = new Date();
date.setDate(date.getDate() + expiredays);
document.cookie = escape(IdName) + "=" + escape(value) + "; expires=" + date.toUTCString();
}오늘 하루 열지 않기를 누르면 쿠키를 생성해 준다.
날짜함수를 이용해 1일 후의 시간을 구하고 팝업 id("layerPop1")와 값(N)을 쿠키에 심어준다.
쿠키의 값 중에 expires는 쿠키의 소멸시간을 뜻하는데 이를 이용해 팝업의 활성화 유무를 판단한다.
//랜덤 색상 코드 만들기
function getRandomColor() {
var letters = '0123456789ABCDEF';
var color = '#';
for (var i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
//쿠키 가져오기
function getCookie(IdName) {
var cookie = document.cookie;
console.log('getCookie : '+IdName);
if (document.cookie != "") {
var cookie_array = cookie.split("; ");
for ( var index in cookie_array) {
var cookie_name = cookie_array[index].split("=");
if (cookie_name[0] == IdName) {
return cookie_name[1];
}
}
}
return;
}
//쿠키 확인후 팝업 열기
function openLayer(IdName, tpos, lpos){
console.log('openLayer : ' + IdName);
var cookieCheck = getCookie(IdName);
console.log('cookieCheck:' + cookieCheck);
var rcolor = getRandomColor();
console.log('rcolor : ' + rcolor);
if (cookieCheck != "N"){
$("#"+IdName).css("top",tpos + "px");
$("#"+IdName).css("left",lpos + "px");
$("#"+IdName).css("display","block");
$("#"+IdName).css("border", "1px solid "+ rcolor);
$("#"+IdName).css("border-bottom", "10px solid "+ rcolor);
$('#'+IdName).draggable();
}
}쿠키를 검색해 내가 지정한 쿠키이름의 값이 존재하는지를 확인한다.
만약 쿠키의 값이 존재한다면 .css를 이용해 레이어팝업창을 보여주거나 닫게 해 주면 된다.
내가 참고한 예제에서는 팝업의 border 색상코드를 최대 5개까지 css에 미리 기입해 놓고 class로 처리를 했는데 재미 삼아 javascript로 만들어서 처리해 보았다.
레이어팝업을 드래그로 움직이게 하고 싶다면 jquery ui 라이브러리를 추가하고 draggable()을 이용하면 손쉽게 움직이는 팝업을 구현할 수 있다.