티스토리 뷰

Javascript

레이어 팝업 예제 소스

잠덜 2016.08.01 16:20


샘플 소스의 데모페이지는 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">오늘 하루 이창을 그만 엽니다. &nbsp;
                <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 입니다.


저작자 표시 변경 금지
신고
댓글
댓글쓰기 폼