레이어팝업 긁어다 쓰기용 예제소스
레이어 팝업을 띄우고, 닫고, 오늘하루 열지 않기 기능을 넣고 그걸 또 필요한곳에 가져다 넣고...
실무에서 간단하면서도 참 사람을 귀찮게 하는 일 중 하나입니다.
그냥 복사해서 쓰세요.
공짜입니다.
<!-- --------------------------------------------------------- 레이어 팝업 소스 시작 --------------------------------------------------------- -->
<?
$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에서 해주시기 바랍니다.
| 번호 | 분류 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|---|
| 5396 | 기타 |
슈퍼스타맨
|
3개월 전 | 333 | |
| 5395 | PHP |
untitled
|
4개월 전 | 807 | |
| 5394 | MySQL |
선택과집중
|
5개월 전 | 579 | |
| 5393 | 웹서버 |
techstar
|
7개월 전 | 848 | |
| 5392 |
|
1년 전 | 1204 | ||
| 5391 | 9개월 전 | 1108 | |||
| 5390 | 9개월 전 | 892 | |||
| 5389 | 8개월 전 | 863 | |||
| 5388 | 8개월 전 | 963 | |||
| 5387 | 7개월 전 | 794 | |||
| 5386 | JavaScript |
nekoieye
|
7개월 전 | 957 | |
| 5385 | 웹서버 | 7개월 전 | 977 | ||
| 5384 | JavaScript |
|
8개월 전 | 800 | |
| 5383 | 기타 | 9개월 전 | 1114 | ||
| 5382 | 기타 |
|
9개월 전 | 566 | |
| 5381 | JavaScript | 9개월 전 | 895 | ||
| 5380 | 기타 |
|
9개월 전 | 674 | |
| 5379 | JavaScript | 9개월 전 | 678 | ||
| 5378 | 10개월 전 | 1186 | |||
| 5377 | 기타 |
|
10개월 전 | 748 | |
| 5376 | jQuery |
|
10개월 전 | 558 | |
| 5375 | jQuery |
techstar
|
10개월 전 | 717 | |
| 5374 | 기타 |
|
10개월 전 | 765 | |
| 5373 | MySQL |
|
11개월 전 | 798 | |
| 5372 | 기타 |
|
11개월 전 | 1000 | |
| 5371 | JavaScript |
|
11개월 전 | 711 | |
| 5370 | JavaScript |
|
11개월 전 | 717 | |
| 5369 | PHP |
|
11개월 전 | 1228 | |
| 5368 | PHP | 11개월 전 | 1396 | ||
| 5367 | 기타 |
nekoieye
|
1년 전 | 1270 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기