레이어팝업 긁어다 쓰기용 예제소스
레이어 팝업을 띄우고, 닫고, 오늘하루 열지 않기 기능을 넣고 그걸 또 필요한곳에 가져다 넣고...
실무에서 간단하면서도 참 사람을 귀찮게 하는 일 중 하나입니다.
그냥 복사해서 쓰세요.
공짜입니다.
<!-- --------------------------------------------------------- 레이어 팝업 소스 시작 --------------------------------------------------------- -->
<?
$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>
<!-- --------------------------------------------------------- 레이어 팝업 소스 끝 --------------------------------------------------------- -->
게시판 목록
개발자팁
질문은 QA에서 해주시기 바랍니다.
| 번호 | 분류 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|---|
| 5126 | PHP |
|
3년 전 | 1797 | |
| 5125 | PHP | 3년 전 | 1598 | ||
| 5124 | PHP | 3년 전 | 2115 | ||
| 5123 | OS | 3년 전 | 1396 | ||
| 5122 | OS | 3년 전 | 1313 | ||
| 5121 | OS | 3년 전 | 1419 | ||
| 5120 | OS | 3년 전 | 1296 | ||
| 5119 | PHP |
|
3년 전 | 1143 | |
| 5118 | PHP | 3년 전 | 1353 | ||
| 5117 | Mobile |
|
3년 전 | 1397 | |
| 5116 | PHP | 3년 전 | 2291 | ||
| 5115 | MySQL |
welcome
|
3년 전 | 2904 | |
| 5114 | OS | 3년 전 | 2002 | ||
| 5113 | JavaScript | 3년 전 | 1539 | ||
| 5112 | PHP | 3년 전 | 1558 | ||
| 5111 | 기타 |
|
3년 전 | 1298 | |
| 5110 | PHP | 3년 전 | 4545 | ||
| 5109 | PHP | 3년 전 | 1578 | ||
| 5108 | 기타 |
|
3년 전 | 12175 | |
| 5107 | 기타 |
|
3년 전 | 2408 | |
| 5106 | 기타 |
|
3년 전 | 6321 | |
| 5105 | 기타 |
|
3년 전 | 3695 | |
| 5104 | 기타 |
|
3년 전 | 1501 | |
| 5103 | JavaScript | 3년 전 | 1691 | ||
| 5102 | 기타 |
|
3년 전 | 1270 | |
| 5101 | 기타 |
|
3년 전 | 1466 | |
| 5100 | 기타 |
|
3년 전 | 1305 | |
| 5099 | 웹서버 | 3년 전 | 2171 | ||
| 5098 | PHP | 3년 전 | 1326 | ||
| 5097 | PHP |
|
3년 전 | 1986 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기