레이어팝업 긁어다 쓰기용 예제소스 정보
JavaScript 레이어팝업 긁어다 쓰기용 예제소스관련링크
본문
레이어 팝업을 띄우고, 닫고, 오늘하루 열지 않기 기능을 넣고 그걸 또 필요한곳에 가져다 넣고...
실무에서 간단하면서도 참 사람을 귀찮게 하는 일 중 하나입니다.
그냥 복사해서 쓰세요.
공짜입니다.
<!-- --------------------------------------------------------- 레이어 팝업 소스 시작 --------------------------------------------------------- -->
<?
$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">오늘 하루 이창을 그만 엽니다.
<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>
<!-- --------------------------------------------------------- 레이어 팝업 소스 끝 --------------------------------------------------------- -->
1
댓글 0개