구매하기시 배경 투명하게
본문
안녕하세요.
일주일째 삽질만 하다 결국 도움 요청드립니다. ㅜㅜ
상세페이지 구매하기 클릭시 사진처럼 바로구매가 튀어나오는데 이때 뒷 배경을 투명하게 처리하고 싶은데 어려운 작업인지요? ㅜㅜ
(장바구니 바로구매는 원안대로 하단에 고정되게끔)
고수님 도움 요청드립니다.
소스는 다음과 같습니다.
<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)}
답변 1
1. 상세페이지 파일에서
<div class="shop-dim"></div>
이런식으로 위처럼 만들어주시고
기본 값을 아래처럼 스타일을 두시어 안보이게 해두시면 됩니다
.shop-dim {display:none}
그리고나서 위 작성해두신
<script>
$(function (){
$(".btn_cart_op").click(function(){
$("#btn_option").show();
$(".shop-dim").show();
});
$("#btn_option .btn_close").click(function(){
$("#btn_option").hide();
$(".shop-dim").hide();
});
});
</script>
처럼 넣으시고 dim을 꾸며주시면 되겠습니다
투명도라면
background: RGB(0 0 0 / 50%);가 적당하겠네요
.shop-dim {display:none;background: RGB(0 0 0 / 50%);}
답변 감사합니다. 적용잘되네요. 복 받으세요~
