일반 레이어 팝업 & 딤(Dim)처리 레이어 팝업

일반 레이어 팝업 & 딤(Dim)처리 레이어 팝업

<style>

pop-layer .pop-container {

  padding: 20px 25px;

}

.pop-layer p.title {

  color: #fff;

  line-height: 40px;

  background-color:#3571B5;

  text-align:center;

  font-size:1.2em;

}

.pop-layer p.ctxt {

  color: #666;

  padding: 5px;

}

.pop-layer .btn-r {

  width: 100%;

  margin: 10px 0 20px;

  padding-top: 10px;

  border-top: 1px solid #DDD;

  text-align: right;

}

.pop-layer {

  display: none;

  position: absolute;

  top: 50%;

  left: 50%;

  width: 1000px;

  height: auto;

  background-color: #fff;

  border: 5px solid #3571B5;

  z-index: 10;

}

.dim-layer {

  display: none;

  position: fixed;

  _position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  z-index: 100;

}

.dim-layer .dimBg {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background: #000;

  opacity: .5;

  filter: alpha(opacity=50);

}

.dim-layer .pop-layer {

  display: block;

}

a.btn-layerClose {

  display: inline-block;

  height: 25px;

  padding: 0 14px 0;

  border: 1px solid #304a8a;

  background-color: #3f5a9d;

  font-size: 13px;

  color: #fff;

  line-height: 25px;

}

a.btn-layerClose:hover {

  border: 1px solid #091940;

  background-color: #1f326a;

  color: #fff;

}

</style>

 

<div class="dim-layer">

    <div class="dimBg"></div>

    <div id="notice_layer" class="pop-layer">

        <div class="pop-container">

            <div class="pop-conts">

                <!--content //-->

                <p class="title">제목........</p>

                <p class="ctxt">내용............</p>

               <div class="btn-r">

                    <a href="#" class="btn-layerClose">오늘 하루 이 창을 열지 않음</a>

                </div>

                <!--// content-->

            </div>

        </div>

    </div>

</div>

<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 

<script>

function setCookie(name, value, expiredays){

var todayDate = new Date();

todayDate.setDate (todayDate.getDate() + expiredays);

document.cookie = name + "=" + escape(value) + "; path=/; expires=" + todayDate.toGMTString() + ";";

}

$(function(){

cookiedata = document.cookie;

if(cookiedata.indexOf('notice_layer=done') < 0){  //오늘 하루 이 창을 열지 않음 클릭 체크

    layer_popup("#notice_layer");

}

   

   

  }); 

    

    function layer_popup(el){

        var $el = $(el);        //레이어의 id를 $el 변수에 저장

        var isDim = $el.prev().hasClass('dimBg');   //dimmed 레이어를 감지하기 위한 boolean 변수

        isDim ? $('.dim-layer').fadeIn() : $el.fadeIn();

        var $elWidth = ~~($el.outerWidth()),

            $elHeight = ~~($el.outerHeight()),

            docWidth = $(document).width(),

            docHeight = $(document).height();

        // 화면의 중앙에 레이어를 띄운다.

        if ($elHeight < docHeight || $elWidth < docWidth) {

            $el.css({

                marginTop: -$elHeight /2,

                marginLeft: -$elWidth/2

            })

        } else {

            $el.css({top: 0, left: 0});

        }

        $el.find('a.btn-layerClose').click(function(){

         setCookie("notice_layer", "done", 1);

            isDim ? $('.dim-layer').fadeOut() : $el.fadeOut(); // 닫기 버튼을 클릭하면 레이어가 닫힌다.

            return false;

        });

        $('.layer .dimBg').click(function(){

            $('.dim-layer').fadeOut();

            return false;

        });

    }  

 

</script>

[출처] http://webclub.tistory.com/189