written by 정다희

이 글에서는 사용자의 상호작용을 통한 요청을 처리하기 위해 많이 쓰이는 팝업창을 디자인해보고 사진 확대 기능에도 적용시켜보도록 할 것이다.

모달 팝업이란?

모달 팝업은 기존 브라우저 페이지 위에 레이어를 까는 것을 말한다.

기존 브라우저와 모달 팝업창은 부모-자식 관계를 가지며 팝업창을 닫기 전까지 기존 브라우저를 닫을 수 없다.

기존의 팝업창과 모달 팝업의 다른 점은 일반 팝업창은 사용자가 원하지 않으면 브라우저 옵션을 통해 팝업 기능을 끌 수 있지만, 모달창은 꼭 창을 닫아줘야한다.

추가로, 레이어 팝업은 모달창과 비슷하지만 창닫기와 같은 행위를 제외한 팝업 내의 행동이 부모창에 영향을 주지 않는다.

모달 팝업을 만들어보자

해당 팝업은 HTML / CSS / JS 으로 구현할 수 있다.

모달 팝업의 구성은 배경/모달팝업을 감싸는 창(popup-wrap)/팝업(popup) 세가지로 구성된다.

또한 팝업창 내부는 팝업창의 html 구성과 비슷하게 body-contentbox 와 popup-foot로 구성한다.

다음은 html 코드이다.

//배경
<div class="container">
			//모달팝업을 감싸는 창
      <div class="popup-wrap" id="popup">
				//팝업창
        <div class="popup">
          <div class="popup-head">
              <span class="head-title">잠깐!</span>
          </div>
          <div class="popup-body">
            <div class="body-content">
              <div class="body-titlebox">
                <img src="{{ url_for('static', filename='images/logo2.png') }}" alt="로고1" style="width:25%; margin:10px;" >
              </div>
                 <br><br><br>
              <div class="body-contentbox">
                <p>구매를 확정하시겠습니까?</p>
              </div>
            </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>

html 로 팝업창의 구조를 만들었으니 CSS을 이용해 팝업창을 꾸며보자.

1. 모달팝업을 감싸는 창의 CSS