모달팝업 질문 채택완료

</p>

<p>        <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></p>

<p>       </ul></p>

<p></div></p>

<p> </p>

<p>    <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></p>

<p>

</p>

<p>.cd .img_box {display:flex; gap:1rem 6rem;  flex-wrap: wrap;}

.cd .img_box > li {width:calc((100% - 6rem * 2)/3);}</p>

<p>/* 팝업창 */

 .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;}</p>

<p>