티스토리 뷰
샘플 소스의 데모페이지는 http://demo.widgets.co.kr/?c=73/65/70 입니다.
간혹 CMS 시스템에 레이어 팝업이 들어있지 않는 경우가 있습니다.
이럴때 레이어 팝업을 띄우려면 숙련된 개발자라고 해도 그 소스를 기억하고 살진 못합니다.
그럴땐 ctr+c -> ctr+v 가 잠깐의 고민도 줄여주고 밥도 먹여줍니다.
아래는 복붙할수 있는 소스 입니다.
복수의 레이어팝업을 띄우기 위해 중간중간 PHP 변수를 삽입했습니다.
크기조절 역시 PHP변수로 선언했습니다.
필요에 따라 언어를 변경해 쓰길 바랍니다.
<!-- --------------------------------------------------------- 레이어 팝업 소스 시작 --------------------------------------------------------- -->
<?
$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 setPopupCookie(name,value,expiredays) {
var todayDate = new Date();
todayDate.setDate( todayDate.getDate() + expiredays );
document.cookie = name + "=" + escape( value ) + "; path=/; expires=" + todayDate.toGMTString() + ";"
}
/*쿠키추출*/
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 "";
}
/*객체얻기*/
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';
}
/*숨기기체크*/
if (getPopupCookie('popview').indexOf('[<?=$popupNum?>]') == -1){
getElm('pop-layer-<?=$popupNum?>').style.display = 'block';
}
/*숨겨진 팝업 쿠키를 초기화 할때 사용 - 스크립트가 아래 존재하기에 새로고침을 두번 해야 적용됨*/
//delPopupCookie('<?=$popupNum?>');
//-->
</script>
<!-- --------------------------------------------------------- 레이어 팝업 소스 끝 --------------------------------------------------------- -->
샘플 소스의 데모페이지는 http://demo.widgets.co.kr/?c=73/65/70 입니다.
'Javascript' 카테고리의 다른 글
Javascript 롤링(슬라이드) 소스 예제 (2) | 2016.08.09 |
---|---|
Ajax로 Cross 도메인간 Json 데이터를 주고 받는 Jsonp 기본 예제 (0) | 2016.08.05 |
PHP에서 json_encode로 Json Data 통신 기본형 예제 소스 (0) | 2012.07.13 |
스마트폰 터치, jquery touchmove 제어 (0) | 2012.03.20 |
jQuery Mobile 기본 템플릿 사용 요약 (0) | 2011.04.14 |
- Total
- Today
- Yesterday
- java
- install
- LAPM
- JavaScript
- 파일삭제
- 시군구 이름
- 안드로이드 개발
- Android
- 안드로이드
- rm으로 삭제
- Non-Interactive
- 법정동코드
- API
- 지역고유코드
- Tomcat
- r
- MySQL
- 앱개발
- HTML
- Linux
- json
- app
- c++
- delete
- MariaDB
- 리눅스
- 삭제한 파일 복원
- apache
- 시도 이름
- Android 개발
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
31 |