[PHP + jQuery] 레이어 팝업 관리
거창하게 팝업관리 시스템이라고 하고 싶었으나 그리 대단한 것은 아니기 때문에 그냥.. 팝업 관리를 좀 더
편하게 하고 싶어서 시간이 좀 있는 틈에 하나 만들었다. 예전에 다른 사이트 작업하면서 기본 개념을 이미
생각을 했던 부분이라서 이번에는 기능 추가에 좀 더 중점을 둬서 작업을 했다. jQuery도 쓰고 있으니까 이걸
활용해서 하면 좋을 것 같은 생각이 들었기 때문이다.
구현하라고 했던 것은 DB에 팝업관련 내용을 저장하고 페이지에서 불러와서 자동으로 팝업을 보여주는 것이다.
레이어를 이용한 팝업의 경우 위치를 지정하는 것이 애매한 부분인데 이 부분은 브라우저 크기에 상관없이 어떤
기준 점을 잡아서 레이어 위치를 바꿀 수 있도록 했다. 그리고 이미지맵을 사용할 경우도 고려해서 작업을 했다.
기본적인 팝업의 모양은 이렇게 생겼다. 하루동안 열지 않기 부분에서 일을 선택할 수 있게 할까도 생각했지만
오늘은 너무 귀찮았기 때문에 그냥 넘겨버리고 나중에 시간이 나거나 심심하면 작업을 해볼까 싶기도 하다. ㅎㅎ
이제 이 기능을 구현한 코드를 정리해볼까 한다. DB구조도 함께 올릴텐니 적당히 수정해서 사용하면 좋을 것 같다.
CREATE TABLE IF NOT EXISTS `popup` (
`po_id` int(11) NOT NULL AUTO_INCREMENT,
`po_subject` varchar(255) NOT NULL,
`po_start` date NOT NULL DEFAULT ‘0000-00-00’,
`po_end` date NOT NULL DEFAULT ‘0000-00-00’,
`po_file` varchar(255) NOT NULL,
`po_top` int(11) NOT NULL DEFAULT ‘0’,
`po_left` int(11) NOT NULL DEFAULT ‘0’,
`po_link` varchar(255) NOT NULL,
`po_link_target` varchar(255) NOT NULL,
`po_map_use` tinyint(4) NOT NULL DEFAULT ‘0’,
`po_map_name` varchar(255) NOT NULL,
`po_map_code` text NOT NULL,
`mb_id` varchar(255) NOT NULL,
`po_ip` varchar(255) NOT NULL,
`po_datetime` datetime NOT NULL DEFAULT ‘0000-00-00 00:00:00’,
PRIMARY KEY (`po_id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8;
/* 팝업 CSS */
.popup { position: absolute; display: none; z-index: 1000; }
.popup_bottom { float: left; height: 25px; font-size: 12px; font-family: “돋움”, “굴림”; background: #000; }
.popup_check { float: left; padding-top: 3px; padding-left: 10px; }
* html .popup_check { float: left; padding-top: 2px; padding-left: 10px; }
.popup_check_desc { float: left; padding-top: 6px; color: #ccc; padding-left: 5px; letter-spacing: 0; }
* html .popup_check_desc { float: left; padding-top: 7px; color: #ccc; padding-left: 5px; letter-spacing: 0; }
.popup_close { float: right; padding-top: 6px; color: #ccc; padding-right: 10px; cursor: pointer; letter-spacing: 0; }
* html .popup_close { float: right; padding-top: 7px; color: #ccc; padding-right: 10px; cursor: pointer; letter-spacing: 0; }
그리고 아래가 바로 index.php 파일에 들어가 있는 내용이다. DB에서 내용을 가져와서 팝업 레이어를 생성한다.
<?php // 팝업처리
// 팝업정보
$sql = ” select po_file, po_link, po_link_target, po_start, po_end, po_top, po_left, po_map_use, po_map_name, po_map_code
from $g4[popup_table] where po_start <= ‘$g4[time_ymd]’ and po_end >= ‘$g4[time_ymd]’ and po_file <> ” order by po_id asc “;
$result = sql_query($sql);
$popup_count = mysql_num_rows($result);
if($popup_count > 0) { ?>
<script type=”text/javascript”>
// 팝업처리
$(function() {
$(‘input.pchk’).click(function() {
var layer = $(this).attr(“name”);
var name = “PopUpCookies_” + layer;
setCookie(name,”done”,1);
$(‘#’+layer).hide();
});
$(‘div.popup_close’).click(function() {
var layer = $(this).attr(“name”);
$(‘#’+layer).hide();
});
});
function getCookie(name){
var 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
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 “”
}
function setCookie(name, value, expiredays){
var todayDate = new Date();
todayDate.setDate( todayDate.getDate() + expiredays );
document.cookie = name + “=” + escape( value ) +”;path=/;expires=”+todayDate.toGMTString()+”;”
}
function chkCookie(name, top, left){
if (getCookie(name) != ‘done’) {
var position = $(‘img#GoHome’).position();
var ini_left = position.left;
var ini_top = position.top;
var layer = name.replace(“PopUpCookies_”, “”);
var new_top = parseInt(ini_top + top);
var new_left = parseInt(ini_left + left);
$(‘#’+layer).css(“top”, new_top).css(“left”, new_left).show();
}
}
</script>
<?php
$script = “<script type=’text/javascript’>n”;
for($i = 0; $row = sql_fetch_array($result); $i++) {
$filepath = “$g4[path]/data/popup/$row[po_file]”;
$size = @getimagesize($filepath);
$mapcode = “”;
if($row[po_map_use]) {
$usemap = “usemap=’#$row[po_map_name]'”;
$image = “<img src=’$filepath’ width=’$size[0]’ border=’0′ $usemap />”;
$mapcode = $row[po_map_code] . “n”;
} else {
$image = “<img src=’$filepath’ width=’$size[0]’ border=’0′ />”;
if(trim($row[po_link])) {
$image = “<a href=’$row[po_link]’ target=’_{$row[po_link_target]}’>” . $image . “</a>”;
}
}
$script .= “chkCookie(‘PopUpCookies_popupid_$i’, $row[po_top], $row[po_left]);n”;
?>
<div id=”popupid_<?=$i?>” class=”popup” style=”width: <?=$size[0]?>px;”>
<div id=”popupimage_<?=$i?>”><?=$image?></div>
<div class=”popup_bottom” style=”width: <?=$size[0]?>px;”>
<div class=”popup_check”><input type=”checkbox” name=”popupid_<?=$i?>” class=”pchk” /></div>
<div class=”popup_check_desc”>하루동안 열지않기</div>
<div class=”popup_close” name=”popupid_<?=$i?>”>닫기</div>
</div>
</div>
<?php
echo $mapcode;
}
$script .= “</script>n”;
echo $script;
}
?>
사이트가 그누보드기반으로 작업 중이기 때문에 DB관련 함수들은 보드 자체 함수를 그대로 사용했다.
팝업 이미지와 내용을 입력하는 폼은 따로 올리지 않겠다. 폼 작성하는 것이 어렵지는 않을 것이라 생각한다.
만약 이 코드를 사용한다면 수정해야할 부분이 var position = $(‘img#GoHome’).position(); 라는 부분에서
기준이 되는 엘리먼트 여기서는 img#GoHome 이다. 이 부분을 수정하면 되고 또한 쿠키 이름도 수정하면 된다.
만약 쿠키 이름을 수정했을 경우 자바스크립트에서 var layer = name.replace(“PopUpCookies_”, “”); 부분도
함께 수정해야한다. 쿠키이름에서 팝업 레이어 ID를 얻는 부분으로 문자열 치한 부분이 들어가 있기 때문이다.
그리고 아래 이미지는 팝업을 등록하는 Form화면이다. 디자인은 고려치 않고 그냥 편하게 만들었을 뿐이다.
