HTML 카페24/고도몰 버튼 클릭시 레이어 팝업 띄우기 [장바구니]

특정 클래스의 버튼을 클릭시 레이어 팝업을 띄우는 방법에 대해 알아보도록 하겠습니다, 레이어 팝업 호출시 뒤의 백그라운드에 흑백처리하여 레이어팝업만 강조하는 방법과, 일반적인 레이어팝업만 호출하는 형태 각각 알아보도록 합니다.

 

HTML 영역

<a href="#cart_layer" class="btn-example">일반 팝업레이어</a>
<div id="cart_layer" class="pop-layer">
    <div class="pop-container">
        <div class="pop-conts">
            <!--content //-->
            <p class="ctxt mb20"><b><font size="5">장바구니</font></b><br>
            </p><br>
            상품명 : ITEMNAME<br>
            판매가 : ITEMPRICE<br>
            수량 : QTY<br>
            <div class="btn-r">
                <a href="#" class="myButton">장바구니 이동하기</a>
                <a href="#" class="myButton2">주문하러 가기</a>
                <a href="#" class="btn-layerClose">close</a>
            </div>
            <!--// content-->
        </div>
    </div>
</div>
<br/><br/>
<a href="#layer2" class="btn-example">딤처리 팝업레이어</a>
<div class="dim-layer">
    <div class="dimBg"></div>
    <div id="layer2" class="pop-layer">
        <div class="pop-container">
            <div class="pop-conts">
                <!--content //-->
            <p class="ctxt mb20"><b><font size="5">장바구니</font></b><br>
            </p><br>
            상품명 : ITEMNAME<br>
            판매가 : ITEMPRICE<br>
            수량 : QTY<br>
            <div class="btn-r">
                <a href="#" class="myButton">장바구니 이동하기</a>
                <a href="#" class="myButton2">주문하러 가기</a>
                <a href="#" class="btn-layerClose">close</a>
            </div>
                <!--// content-->
            </div>
        </div>
    </div>
</div>

 

CSS 영역

<style type="text/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%;
  position: fixed;
  width: 410px;
  height: auto;
  background-color: #fff;
  border: 5px solid #000000;
  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;
}

.myButton {
	background-color:#44c767;
	border-radius:28px;
	border:1px solid #18ab29;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:13px;
	padding:11px 15px;
	text-decoration:none;
	text-shadow:0px 1px 0px #2f6627;
}
.myButton:hover {
	background-color:#5cbf2a;
}
.myButton:active {
	position:relative;
	top:1px;
}

.myButton2 {
	background-color:#1c93a8;
	border-radius:28px;
	border:1px solid #0a0a0a;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:13px;
	padding:11px 15px;
	text-decoration:none;
	text-shadow:0px 1px 0px #8a8a21;
}
.myButton2:hover {
	background-color:#4b1c80;
}
.myButton2:active {
	position:relative;
	top:1px;
}

</style>

 

자바스크립트 영역

<script type="text/javascript">
$('.btn-example').click(function(){
        var $href = $(this).attr('href');
        layer_popup($href);
    });
    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(){
            isDim ? $('.dim-layer').fadeOut() : $el.fadeOut(); // 닫기 버튼을 클릭하면 레이어가 닫힌다.
            return false;
        });

        $('.layer .dimBg').click(function(){
            $('.dim-layer').fadeOut();
            return false;
        });

    }
</script>

 

 

적용화면

일반 팝업레이어 클릭시 화면

딤처리 레이어팝업

 

 

적용 전체 로컬 소스

clickevent_layerpopup.html

0.01MB