개발
간단한 div 팝업
에드몽단테스
2011. 1. 31. 20:49
말 그대로 정말 초간단 div 팝업입니다.
div의 이동이나 크기조절은 없고 쿠키를 이용해 '열지않음' 기능만 있습니다.
팝업내용도 이미지만 이용합니다.
우선 자바스크립트를 선언합니다.
그리고 팝업이 위치할 위치에 div를 넣어줍니다.
body 태그 바로 밑에 두는 것이 좋겠죠?
그러면 다음과 같은 간단한 팝업이 뜹니다.
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>
//<![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>
그러면 다음과 같은 간단한 팝업이 뜹니다.
반응형