HTML

<a href="#" class="pop_klover" onclick="pop_klover(this, '#klover-layer')">팝업레이어2</a>
    <div class="klover-dim-layer">
    <div class="klover-dimBg"></div>    
    <div id="klover-layer" class="pop-layer" >
        <div class="pop-container">
            <div class="pop-conts">
                <!--content //-->
                <p class="ctxt mb20">Thank you.<br>
                    
                </p>

                <div class="btn-r">
                    <a href="#" class="btn-layerClose">Close</a>
                </div>
                <!--// content-->
            </div>
        </div>
    </div>
</div>

 

CSS

.pop-layer .pop-container {padding: 20px 25px;}
.pop-layer p.ctxt {color: #666;line-height: 25px;}
.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: 410px;height: auto;background-color: #fff;border: 5px solid #3571B5;z-index: 10;}
.klover-dim-layer {display: none;position: fixed;_position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 100;}
.klover-dim-layer .klover-dimBg {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: #000;opacity: .5;filter: alpha(opacity=50);}
.klover-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;}

 

JS

function pop_klover(event,el){		
    var $el = $(el);		//레이어의 id를 $el 변수에 저장
    var isDim = $el.prev().hasClass('klover-dimBg');	//dimmed 레이어를 감지하기 위한 boolean 변수

    isDim ? $('.klover-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(){
        isDim ? $('.klover-dim-layer').fadeOut() : $el.fadeOut(); // 닫기 버튼을 클릭하면 레이어가 닫힌다.
        return false;
    });
    
    $('.pop-klover .klover-dimBg').click(function(){
        $('.klover-dim-layer').fadeOut();
        return false;
    });

    return false;
}