레이어팝업 긁어다 쓰기용 예제소스

레이어 팝업을 띄우고, 닫고, 오늘하루 열지 않기 기능을 넣고 그걸 또 필요한곳에 가져다 넣고...

실무에서 간단하면서도 참 사람을 귀찮게 하는 일 중 하나입니다.

그냥 복사해서 쓰세요.

공짜입니다.

<!-- --------------------------------------------------------- 레이어 팝업 소스 시작 --------------------------------------------------------- -->

<?

$popupNum = 20160801;//팝업창 고유번호

$popupWidth = 600;//팝업창 너비

$popupHeight = 600;//팝업창 높이

$popupTop = 130;//팝업창 너비

$popupLeft = 170;//팝업창 높이

?>

<!-- 레이어스타일 -->

<style type="text/css">

#_hidden_layer_{position: absolute;z-index:999; width: 100%;top: 0px; left: 0px;}/*팝업을 담아 제어할 레이어 - 그냥 상단에 커튼걸이 비슷한 용도*/

#pop-layer-<?=$popupNum?>{position:absolute;z-index:999;display:none;width:<?=$popupWidth?>px;height:<?=$popupHeight?>px;top:<?=$popupTop?>px;left:<?=$popupLeft?>px;}/* 레이어 너비/높이, 상단/좌측 위치 width:600px;height:600px;top:130px;left:170px; */

#pop-layer-<?=$popupNum?>-body{height:<?=$popupHeight-25?>px;overflow-x:hidden;overflow-y:hidden;border:#dfdfdf solid 1px;background:#ffffff;}/* 레이어 높이 -25 = height:575px;*/

#pop-layer-<?=$popupNum?>-close{height:25px;background:#343434;text-align:center;color:#ffffff;}

#pop-layer-<?=$popupNum?>-ckd{}

#pop-layer-<?=$popupNum?>-btn{position:relative;left:20px;}

</style>

<!-- 레이어엘리먼트 -->

<div id="_hidden_layer_">

<div id="pop-layer-<?=$popupNum?>">

<div id="pop-layer-<?=$popupNum?>-body">

<!-- 팝업 내용 입력영역 -->

내용을 입력하세요.

<!-- 팝업 내용 입력영역 끝-->

<br><br>

</div>

<div id="pop-layer-<?=$popupNum?>-close">

<!-- 하단 버튼영역 -->

<input id="pop-layer-<?=$popupNum?>-ckd" type="checkbox">오늘 하루 이창을 그만 엽니다. &nbsp; 

<button id="pop-layer-<?=$popupNum?>-btn" onclick="hideLayerPopup('<?=$popupNum?>');" class="hand" alt="창닫기">X</button>

<!-- 하단 버튼영역 끝-->

</div>

</div>

</div>

<script type="text/javascript">

<!--

/*쿠키삭제*/

function delPopupCookie(id){

var nowcookie = getPopupCookie('popview');

setPopupCookie('popview', '['+id+']' + nowcookie , 0);

}

/*쿠키추출*/

function getPopupCookie( 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 "";

}

/*숨기기체크*/

if (getPopupCookie('popview').indexOf('[<?=$popupNum?>]') == -1){

getElm('pop-layer-<?=$popupNum?>').style.display = 'block';

}

/*쿠키세팅*/

function setPopupCookie(name,value,expiredays) { 

var todayDate = new Date(); 

todayDate.setDate( todayDate.getDate() + expiredays ); 

document.cookie = name + "=" + escape( value ) + "; path=/; expires=" + todayDate.toGMTString() + ";" 

}

/*객체얻기*/

function getElm(id){

return document.getElementById(id);

}

/*닫기동작*/

function hideLayerPopup(uid) { 

if (getElm('pop-layer-'+uid+'-ckd').checked == true){

var nowcookie = getPopupCookie('popview');

setPopupCookie('popview', '['+uid+']' + nowcookie , 1);

}    

getElm('pop-layer-'+uid).style.display = 'none';

}

/*숨겨진 팝업 쿠키를 초기화 할때 사용 - 스크립트가 아래 존재하기에 새로고침을 두번 해야 적용됨*/

//delPopupCookie('<?=$popupNum?>');

//-->

</script>

<!-- --------------------------------------------------------- 레이어 팝업 소스 끝 --------------------------------------------------------- -->