[많이쓰는 UI] 모달 팝업

요즘 많이들 사용하시는 모달팝업을 만드는 방법은 너무너무너무 간단하기 때문에 꼭 알아두시면 좋을것 같습니다. 모르면 한없이 어려워 보이고, 알면 한없이 쉬운 모달팝업에 대해서 말씀드리겠습니다.

마크업

모달 팝업은 배경과 내용 2개의 영역으로 구성되어 있습니다. HTML 마크업을 통해서 2가지의 영역을 만들어 보겠습니다.

<section id="modal" class="modal">
  <div class="content"></div>
</section>

스타일

배경은 가로 100%, 세로 100vh 사이즈를 사용하고, 내용은 높이가 60~80vh 정도로 유지해 주시고, 가로 폭은 자유롭게 설정해주시면 됩니다.

모달 기본 스타일

.modal {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1000;
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}
.modal .content {
  height: 80vh;
  min-width: 50%;
  padding: 20px;
  box-sizing: border-box;
  background-color: #fff;
  box-shadow: 0 1px 7px rgba(0, 0, 0, 0.5);
  transform: translateY(20%);
  opacity: 0;
}

모달이 보여질 때의 애니메이션 효과

.modal.on {
  display: flex;
  z-index: 1000;
}
.modal.on .content {
  transform: translateY(0);
  opacity: 1;
  transition: all 0.3s;
}

모달 컴포넌트

모달은 보여주기 / 숨기기 두가지가 주요 이벤트 이며, 모달 화면 이외에 바깥 공간을 클릭 시, 모달팝업이 닫히도록 되어 있습니다. 아래의 코드를 사용하여, 모달 팝업의 주요 이벤트를 적용할 수 있습니다.

function Modal(target) {
  const modal = document.querySelector(target);

  modal.addEventListener("click", function () {
    modal.className = "modal";
  });
  modal.children[0].addEventListener("click", function (e) {
    e.stopPropagation();
  });

  return {
    show: function () {
      modal.className = "modal on";
    },
    hide: function () {
      modal.className = "modal";
    }
  };
}

사용법은 다음과 같이 아이디, 클래스와 같은 셀렉터를 넣어 주시면 됩니다.

const modal = new Modal("#modal");

See the Pen Pure javascript modal by 홍지성 (@lnbvocxe) on CodePen.