모달 팝업 만들기

정다희·2023년 11월 22일

모달 팝업이란

모달 팝업은 기존 브라우저 페이지 위에 레이어를 까는 것을 말한다.
기존 브라우저와 모달 팝업창은 부모-자식 관계를 가지며 팝업창을 닫기 전까지 기존 브라우저를 닫을 수 없다. 기존의 팝업창과 모달 팝업의 다른 점은 일반 팝업창은 사용자가 원하지 않으면 브라우저 옵션을 통해 팝업 기능을 끌 수 있지만, 모달창은 꼭 창을 닫아줘야한다.
추가로, 레이어 팝업은 모달창과 비슷하지만 창닫기와 같은 행위를 제외한 팝업 내의 행동이 부모창에 영향을 주지 않는다.

모달 팝업을 만들어보자!

모달 팝업의 구성은 배경/모달팝업을 감싸는 창(popup-wrap)/팝업(popup) 세가지로 구성된다.
또한 팝업창 내부는 html 구성과 비슷하게 body-contentbox 와 popup-foot로 구성한다.
다음은 html 코드이다.

<div class="container">
  <div class="modal-btn-box">
      <button type="button" id="modal-open">모달창 열기</button>  
  </div>
  <div class="popup-wrap" id="popup">
    <div class="popup">
          <div class="body-contentbox">
            <p>입력하실 제품의 이름을 입력하세요</p><br>
             <input type="text" placeholder="검색어 입력" style="font-size: 15px; width: 180px; height:30px; margin-right: 5px;"> <br>
            <p>본인에게 해당 제품의 적합여부를 입력하세요</p>
          </div>
    </div>
      	  <div class="popup-foot">
           <span class="pop-btn confirm" id="confirm">적합</span>
           <span class="pop-btn close" id="close">부적합</span>
      </div>
    </div>
</div>
</div>

CSS로 팝업창 꾸미기

모달 팝업을 감싸는 박스의 css

팝업창이 떴을 때 배경 처리
팝업창의 위치

.popup-wrap{
  background-color:rgba(0,0,0,.7); //마지막 숫자로 배경 투명도 조절
  justify-content:center;
  align-items:center;
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  display:none; //버튼 클릭을 통해 팝업창을 열기 위해 처음에 숨김
  padding:15px;
}

모달 팝업의 CSS

.popup{
  width:100%;
  max-width:400px;
  background-color:#ffffff;
  border-radius:10px;
  overflow:hidden; //radius로 인해 내부가 밖으로 나오는걸 방지
  background-color:#00462A;
  box-shadow: 5px 10px 10px 1px rgba(0,0,0,.3);
  margin:auto;
}

모달 팝업 내부의 body, foot CSS

.body-contentbox{
  word-break:break-word;
  overflow-y:auto;
  min-height:50px;
  max-height:200px;
  text-align:center;
}

.popup-foot{
  width:100%;
  height:50px;
}

foot 의 버튼 영역 CSS

.pop-btn{
  display:inline-flex;
  width:49.5%;
  height:100%;
  float:left;
  justify-content:center;
  align-items:center;
  color:#000000;
  cursor:pointer;
  border-top: 1px solid #000000;
}
.pop-btn.confirm{
  border-right:1px solid #000000;
}

여기까지 완료하면 팝업창의 구성이 끝난다.
다음은 jQuery로 팝업을 열고 닫는 이벤트를 설정해보자.
먼저 다음 코드로 jQuery를 사용한다.

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

팝업창이 열렸을 때 배경의 스크롤 기능이 활성화 되지 않도록 함수를 생성해 적용해준다.

    function disableScroll() {
    // body 요소의 overflow를 hidden으로 변경하여 스크롤 비활성화
    document.body.style.overflow = 'hidden';
    }

    function enableScroll() {
    // body 요소의 overflow를 다시 visible로 변경하여 스크롤 활성화
    document.body.style.overflow = 'visible';
    }
    $(function(){
      $("#confirm").click(function(){
          //모달 닫기 함수 호출
          modalClose();
          enableScroll();
          //컨펌 이벤트 처리
      });
      $("#modal-open").click(function(){        
          $("#popup").css('display','flex').hide().fadeIn();
          disableScroll();
          //팝업을 flex속성으로 바꿔준 후 hide()로 숨기고 다시 fadeIn()으로 효과
      });
      $("#close").click(function(){
          modalClose(); //모달 닫기 함수 호출
          enableScroll();
      });
      function modalClose(){
          $("#popup").fadeOut(); //페이드아웃 효과
      }
    });

confirm 과 close 가 될 때 DB에 정보를 저장하거나 함수를 호출하여 버튼 기능으로 사용할 수 있다.

위의 코드를 모두 적용하고 모달창 열기 버튼을 통해 나온 화면이다.
적합/부적합 버튼 선택을 통해 모달창을 종료할 수 있다.