안녕하세요.

상세페이지에서 바로구매가 튀어 나오면

닫기 버튼이 작아서 바깥쪽 배경을 아무곳이나 눌러도 

창이 닫히게 하고 싶은데 어떻게 수정하면 될까요?

검색해도 비슷한 질문이 한건도 없어서

고민끝에 글을 남겨보아요.

고수님들 도움 부탁드립니다.

좋은하루 되세요~

소스는

<div class="btn_option_wr">

<button type="button" class="btn_cart_op btn_submit btn">구매하기</button>
</div>

<script>
$(function (){
    $(".btn_cart_op").click(function(){
        $("#btn_option").show();
    });
    $("#btn_option .btn_close").click(function(){
        $("#btn_option").hide();
    });
});
</script>

#btn_option {display:none;position:fixed;bottom:0;left:0;width:100%;background:#fff;z-index:90;border-top:1px solid #000;
-webkit-box-shadow:0 0 9px rgba(0,0,0,0.2)
-moz-box-shadow0 0 9px rgba(0,0,0,0.2);
box-shadow:0 0 6px rgba(0,0,0,0.2)}
#btn_option .sl_option {max-height:240px;overflow-y:auto;padding:10px}
#btn_option h3 {margin-bottom:10px}
#btn_option .btn_close {position:absolute;top:-25px;left:50%;width:60px;height:25px;margin-left:-30px;border:1px solid #000;border-bottom:0;background:#fff;border-radius:3px 3px 0 0}
.btn_cart_op {width:100%;text-align:center;font-weight:bold}
.btn_option_wr {position:fixed;bottom:0;left:0;width:100%;padding:10px;background:#fff;border-top:1px solid #000;z-index:88;
-webkit-box-shadow:0 0 9px rgba(0,0,0,0.2);
-moz-box-shadow:0 0 9px rgba(0,0,0,0.2);
box-shadow:0 0 6px rgba(0,0,0,0.2)}