레이어팝업 긁어다 쓰기용 예제소스
레이어 팝업을 띄우고, 닫고, 오늘하루 열지 않기 기능을 넣고 그걸 또 필요한곳에 가져다 넣고...
실무에서 간단하면서도 참 사람을 귀찮게 하는 일 중 하나입니다.
그냥 복사해서 쓰세요.
공짜입니다.
<!-- --------------------------------------------------------- 레이어 팝업 소스 시작 --------------------------------------------------------- -->
<?
$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에서 해주시기 바랍니다.
| 번호 | 분류 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|---|
| 4976 | 기타 | 5년 전 | 2120 | ||
| 4975 | 웹서버 |
nooree
|
5년 전 | 2768 | |
| 4974 | node.js |
younhoso
|
5년 전 | 2141 | |
| 4973 | PHP |
|
5년 전 | 3640 | |
| 4972 | 기타 |
younhoso
|
6년 전 | 2265 | |
| 4971 | JavaScript | 6년 전 | 2488 | ||
| 4970 | 웹서버 | 6년 전 | 4124 | ||
| 4969 | JavaScript |
|
6년 전 | 2783 | |
| 4968 | JavaScript |
|
6년 전 | 1937 | |
| 4967 | JavaScript |
younhoso
|
6년 전 | 2046 | |
| 4966 | JavaScript |
|
6년 전 | 2117 | |
| 4965 | PHP |
|
6년 전 | 2104 | |
| 4964 | 기타 | 6년 전 | 2923 | ||
| 4963 | JavaScript | 6년 전 | 2091 | ||
| 4962 | JavaScript | 6년 전 | 2286 | ||
| 4961 | jQuery |
아이티몬스
|
6년 전 | 2095 | |
| 4960 | PHP | 6년 전 | 2743 | ||
| 4959 | 기타 | 6년 전 | 2569 | ||
| 4958 | PHP |
아이티몬스
|
6년 전 | 4580 | |
| 4957 | 기타 | 6년 전 | 2099 | ||
| 4956 | 정규표현식 |
하늘위의길
|
6년 전 | 2324 | |
| 4955 | 정규표현식 |
하늘위의길
|
6년 전 | 2678 | |
| 4954 | 웹서버 |
하늘위의길
|
6년 전 | 4138 | |
| 4953 | PHP | 6년 전 | 2527 | ||
| 4952 | PHP |
몰라무서워
|
6년 전 | 3214 | |
| 4951 | MySQL | 6년 전 | 4134 | ||
| 4950 | jQuery | 6년 전 | 3616 | ||
| 4949 | node.js | 6년 전 | 2682 | ||
| 4948 | node.js | 6년 전 | 2408 | ||
| 4947 | node.js | 6년 전 | 2648 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기