[ jquery ] 모달창 만들기 / 형제요소 메소드 .siblings() 활용

html

<div>컨텐츠</div>
<div class="in_button">
    <a href="javascript:void(0);" class="modal_btn">모달창 띄우는 버튼</a>
    <!--모달창-->
    <div class="modal_box hidden">
      <p>모달창 내용</p>
      <a href="" class="close_btn"></a>
      </div>
    </div>
  </div>

 

CSS

.modal_box {
    position: fixed;
    width: calc(100vw*(400/428));
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    padding: calc(100vw*(45/428)) calc(100vw*(20/428));
    border: 1px solid #ddd;
    border-radius: calc(100vw*(14/428));
    background-color: #fff;
    box-shadow : rgba(0,0,0,0.5) 0 0 0 9999px;
}

.hidden {
	display: none;
}

 

제이쿼리 / 자바스크립트

 

//모달창 띄우기
$(".in_button > a").click(function() {
$(this).siblings(".modal_box").removeClass("hidden")
});	

//모달 close버튼
$(".close_btn").click(function() {
$(".modal_box").addClass("hidden")
});