<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<title>레이어 팝업</title>
<style>
/* Layer 팝업 css */
.LayerPopupTbl {position: absolute;border: 1px solid #2d2d2d;display: table;background-color: #ffffff;border-collapse: collapse;}
.LayerPopupTbl > thead > tr > td {width: 100%;padding-top: 3px;padding-bottom: 3px;background-color: #00CCFF;text-align: right;}
.LayerPopupTbl > tbody > tr > td {background-color: #FFF;display: table-cell;}
.LayerPopupTbl > tbody > tr > td img {margin:-1px;float:left;}
.LayerPopupTbl > tfoot > tr > td {background-color: #c9c9c9;padding: 3px;}
</style>
<script>
/* Popup */
var PopupmoveX = 0;
var PopupmoveY = 0;
var topPopup = 0;
var leftPopup = 0;
function zIndexReload(ele) {
$(ele).css("z-index", 1000).siblings().css("z-index", 999);
}
function Popupdrag(ev) {
if ($(ev.target).offset() != undefined) {
topPopup = ev.clientY - $(ev.target).offset().top;
leftPopup = ev.clientX - $(ev.target).offset().left;
}
PopupmoveX = ev.clientX;
PopupmoveY = ev.clientY;
}
function Popupdrop(ev) {
PopupmoveX = ev.clientX;
PopupmoveY = ev.clientY;
$(ev.target).css("top", (PopupmoveY - topPopup)).css("left", (PopupmoveX - leftPopup));
}
function setCookie(name, value, expiredays) {
var todayDate = new Date();
todayDate.setDate(todayDate.getDate() + expiredays);
//todayDate.getDate()- localtime의 달의 날짜를 반환(1~31). setDate의경우 달의 날짜를 설정
document.cookie = name + '=' + escape(value) + '; path=/; expires=' + todayDate.toGMTString() + ';';
}
function getCookie(name) {
var nameOfCookie = name + '=';
var x = 0;
while (x <= document.cookie.length) {
var y = (x + nameOfCookie.length);
if (document.cookie.substring(x, y) == nameOfCookie) {
if ((endOfCookie = document.cookie.indexOf(';', y)) == -1)
endOfCookie = document.cookie.length;
return unescape(document.cookie.substring(y, endOfCookie));
}
x = document.cookie.indexOf(' ', x) + 1;
if (x == 0)
break;
}
return '';
}
// 오늘 하루 이창을 열지 않음
function PopupClose(elem) {
var elemName = $(elem).parents("table:first").attr("id");
setCookie(elemName, 'done', 1); // 오른쪽 숫자는 쿠키를 유지할 기간을 설정합니다
$(elem).parents("table:first").remove();
}
$(function () {
/* 목록만큼 돌린다 */
for (var i in popupArray) {
var mypopupName = popupArray[i].name;
var mypopupTop = popupArray[i].top;
var mypopupLeft = popupArray[i].left;
var mypopuphtml = popupArray[i].html;
/* 오늘 하루 이창 열지 않음을 누른상태가 아니라면 보여준다. */
if (getCookie(mypopupName) != "done") {
var popuptbl = document.createElement("table");
popuptbl.setAttribute("class", "LayerPopupTbl");
popuptbl.setAttribute("id", mypopupName);
popuptbl.setAttribute("draggable", true);
popuptbl.setAttribute("ondragstart", "Popupdrag(event)");
popuptbl.setAttribute("ondragend", "Popupdrop(event)");
popuptbl.setAttribute("onmouseover", "zIndexReload(this)");
popuptbl.style.top = mypopupTop;
popuptbl.style.left = mypopupLeft;
var formhtml = [];
formhtml.push("<thead><tr><td><a onclick=\"$(this).parents('table:first').remove();\">[닫기]</a></td></tr></thead>");
formhtml.push("<tbody><tr><td>" + mypopuphtml + "</td></tr></tbody>");
formhtml.push("<tfoot><tr><td><label><input type=\"checkbox\" onClick=\"PopupClose(this);\" /> 오늘 하루 이창을 열지 않음</label></td></tr></tfoot>");
popuptbl.innerHTML = formhtml.join("");
document.body.appendChild(popuptbl);
}
}
});
/* 팝업목록 name=팝업이름(id), top:팝업위치, left: 팝업위치, html : 팝업내용 - 만질경우 이부분만 고쳐서 사용하려고 구성... */
var popupArray = [
/* 팝업1 */
{ "name": "POPUP_ex_1", "top": "8px", "left": "20px", "html": "<a href='http://www.naver.com'><img alt='' src='https://ssl.pstatic.net/static/kin/09renewal/banner_roulette.png'/></a>" },
/* 팝업2 */
{ "name": "POPUP_ex_2", "top": "8px", "left": "300px", "html": "<div style=\"background-color:yellow\"><h4 style=\"margin:0;padding:0;line-height:1.6;\">공지사항</h4><p style=\"margin:0;padding:0;line-height:1.6;\">안녕하세요</p></div>" },
/* 팝업3 */
{ "name": "POPUP_ex_3", "top": "176px", "left": "20px", "html": "<img alt='' src='https://ssl.pstatic.net/static/kin/09renewal/bingo_banner.png'>" },
]
</script>
</head>
<body>
</body>
</html>
20. 9. 9.
Jquery Layer Popup(Drag & Drop)
은근히 쓰게되는 제이쿼리 레이어팝업...
피드 구독하기:
글 (Atom)