<div class="modal">
            <ul class="img_box mb0">
                <li>
                  <a href="javascript:void(0);" class="modal_btn"><img src="사진" alt=""></a>
                  <div class="modal_popup">
                    <div class="modal_con">
                      <img src="사진" alt="">
                      <p>테스트 텍스트</p>
                    </div>
                    <button type="button" class="modal_close"><img src="사진" alt=""></button>
                  </div>
                </li>
       </ul>
</div>
 
    <script>
        $('.modal_btn').click(function(){
            $(this).siblings().show()
            $('.modal_close').click(function(){
                $('.modal').hide()
            })
        })
        $(document).mouseup(function (e){
          var LayerPopup = $(".modal_popup");
            if(LayerPopup.has(e.target).length === 0){
                if(!($(event.target).get(0).scrollHeight > $(event.target).innerHeight())){ //스크롤 시 닫히지 않게
                    LayerPopup.hide();
                }
          }
        });
    </script>

.cd .img_box {display:flex; gap:1rem 6rem;  flex-wrap: wrap;}
.cd .img_box > li {width:calc((100% - 6rem * 2)/3);}
/* 팝업창 */
 .cd .modal {position:relative;}
 .cd .modal_popup {display:none; position: fixed; top: 0; left: 0;  width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.65); z-index: 9999;}
.cd .modal .modal_con {display: flex; justify-content: center; align-items: center; flex-direction: column; width:38.2rem; height:23.6rem; background:#fff; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.cd .modal .modal_con  > p {padding-left: 0rem; font-size: 1.1rem; margin-top: 2.5rem;}
.cd .modal .modal_close {position: absolute; top: 9.35rem; right: 22.1rem;}