영카트 첫화면 장바구니 버튼..
본문
클릭하면 MY쇼핑 등등 내용이 나오는데요.
X 버튼을 클릭해야 닫히는데.. 배경이나 다른곳을 터치해도 창이 닫히도록 할 수 없을까요??
전문가의 도움 부탁드려요.
답변 1
아래의 코드를 참고 해보시겠어요?
<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>
감사합니다^^
