모달팝업 질문

모달팝업 질문

QA

모달팝업 질문

본문


        <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;}

 

1889326033_1712134637.4028.png

 

안녕하세요

이미지로 된 버튼을 누르면 나오는 모달팝업 코드를 만들었습니다

 

눌러서 팝업 나오고 닫기 버튼으로 없애는거까지 잘되는데 css가 말썽입니다. 첨부한 사진을 보시다싶이... fixed 하고 width height 모두 100% 했는데 화면 전체를 채우지 못하고 부모 요소만 꽉 채워서 되게 이상해보입니다;;;; 대체 뭐가 문제여서 이렇게 나오는걸까요?

이 질문에 댓글 쓰기 :

답변 1

크롬의 개발자 도구(F12) 를 사용하셔서 어디에 문제가 되는지 여부를 먼저 확인해보시면 빠르게 

알수 있습니다.

답변을 작성하시기 전에 로그인 해주세요.
전체 123,534 | RSS
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT