말 그대로 정말 초간단 div 팝업입니다.
div의 이동이나 크기조절은 없고 쿠키를 이용해 '열지않음' 기능만 있습니다.
팝업내용도 이미지만 이용합니다.
우선 자바스크립트를 선언합니다.
<script type="text/javascript">
//<![CDATA[
function getCookie(sName) {
var aCookie = document.cookie.split("; ");
for (var i = 0; i < aCookie.length; i++) {
var aCrumb = aCookie[i].split("=");
if (sName == aCrumb[0]){
return unescape(aCrumb[1]);
}
}
return null;
}
function setCookie(name, value, expiredays) {
var todayDate = new Date();
todayDate.setDate(todayDate.getDate() + expiredays);
document.cookie = name + "=" + escape( value ) + "; path=/; expires=" + todayDate.toGMTString() + ";"
}
// 팝업이미지를 넣을 경로를 지정합니다.
function addPopup(imagename, top, left, width, height){
var popup = document.getElementById('popupID');
var src = '<img src=../images/popup/'+imagename+' alt="" />';
src += '<div style="border:1px solid #b1b1b1;margin-bottom:1px;color:white;background-color:black;text-align:right;height:20px;padding-right:5px;">하루동안 열지 않음 <input type="checkbox" onclick="hidePopup(\'popupID\', \'ok\', \'1\');" /></div>';
popup.innerHTML = src;
popup.style.top = top+'px';
popup.style.left = left+'px';
popup.style.width = width+'px';
popup.style.height = height+'px';
popup.style.display = 'block';
}
function hidePopup(name, value, expiredays){
setCookie(name, value, expiredays);
var popup = document.getElementById(name);
popup.style.display = 'none';
}
window.onload = function(){
if(getCookie('popupID') != 'ok'){
// 이미지이름, 위치(위,아래), 폭(가로), 높이(세로)
addPopup('popup.gif', '10', '10', '233', '110');
}
};
//]]>
</script>
그리고 팝업이 위치할 위치에 div를 넣어줍니다.
body 태그 바로 밑에 두는 것이 좋겠죠?
<div id="popupID" style="z-index:100;position:absolute;background-color:white;display:none;"></div>
그러면 다음과 같은 간단한 팝업이 뜹니다.