클릭시 (누르면)레이어팝업 or 박스 나오게 하기

html

 

클릭할 버튼 or div

<div<div class="filtering clear">

<button type="button" class="tradetype">거래유형</button>

</div>

 

<section class="tradetype_area samefilter">

보일 내용(닫기, 확인 버튼 등 추가)

</section>

<div class="filtering clear">
<button type="button" class="tradetype">거래유형</button></div>
<section class="tradetype_area samefilter">보일 내용</section>

 

 

모양 위치 색은 조절하면 됨

css

.tradetype_area {
visibility: hidden;
opacity: 0;
position: fixed;
width: 90%;
height: auto;
overflow: auto;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 9999;
background: #fff;
padding: 10px 15px;
box-shadow: 0px 0px 0px 100vh rgba(0, 0, 0, 0.7);
}

.tradetype_area { visibility: hidden; opacity: 0; position: fixed; width: 90%; height: auto; overflow: auto; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 9999; background: #fff; padding: 10px 15px; box-shadow: 0px 0px 0px 100vh rgba(0, 0, 0, 0.7); }

 

js

$(".tradetype").click(function() {
$(".tradetype_area").addClass("on");
$("body").addClass("fixed");
})
$(".btn_close").click(function() {
$("body").removeClass("fixed");
$(".tradetype_area").removeClass("on");
})
$(".tradetype_area .btn_submit_area span").click(function() {
$("body").removeClass("fixed");
$(".tradetype_area").removeClass("on");
})

$(".tradetype").click(function() { $(".tradetype_area").addClass("on"); $("body").addClass("fixed"); }) $(".btn_close").click(function() { $("body").removeClass("fixed"); $(".tradetype_area").removeClass("on"); }) $(".tradetype_area .btn_submit_area span").click(function() { $("body").removeClass("fixed"); $(".tradetype_area").removeClass("on"); })