아래의 코드를 참고 해보시겠어요?

<script>
$(document).ready(function() {
    // 팝업 창의 배경을 클릭하면 닫기
    $(document).on('click', function(event) {
        var $target = $(event.target);

        // 팝업 창 이외의 영역 클릭 시 닫기
        if ($('.popup').is(':visible')) {
            if (!$target.closest('.popup, .cart-button').length) {
                $('.popup').hide();
            }
        }
    });

    // 장바구니 버튼 클릭 시 팝업 열기
    $('.cart-button').on('click', function(event) {
        event.preventDefault();
        $('.popup').show();
    });

    // X 버튼 클릭 시 팝업 닫기
    $('.close-button').on('click', function(event) {
        event.preventDefault();
        $('.popup').hide();
    });
});
</script>
 

<!-- 장바구니 버튼 -->
<button class="cart-button">장바구니</button>

<!-- 팝업 창 -->
<div class="popup" style="display:none;">
    <button class="close-button">X</button>
    <!-- 팝업 내용 -->
</div>