모달

모달창 많이 들어봤는데 정확히 뭔지 몰라서 알아보았다.

모달(Modal) = Dialogs

이목을 집중 해야 하는 화면을 다른 화면 위로 띄워 표현하는 방식

모달로 보이는 화면을 사라지게 하려면 특정 선택을 해야함

• 얼럿 : 확인 / 취소
• 액션시트 : 무엇인가 선택
• 무언가 작성 후 전송 또는 취소

모달로 보이는 화면은 되도록 단순하고 사용자가 빠르게 처리 할 수 있는 내용을 표현

모달 종류 4가지 - 사진 링크

• Alert dialog
• Simple dialog
• Confirmation dialog
• Full-screen dialog

모달 샘플 코드

.modal {
  z-index: 1000;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.6);
  opacity: 1;
}
.modal-content {
  // 원하는 크기만 큼
}

// 클릭 이벤트를 달거나 특정 버튼을 클릭시 모달 창 닫게 만들면 될 듯

팝업 vs 모달

팝업창

• 현재 열려있는 브라우저 페이지에 브라우저 페이지를 띄우는 방식

모달창

• 레이어를 깔음, 페이지 이동 시 자연히 사라짐

팝업창과 모달창의 공통점

별도 레이어를 만들어 방문자에게 원하는 시점에 보여줌

팝업창과 모달창의 차이점

팝업창

• 웹 시작과 동시에 띄우는 경우가 많음
• 현재 의도하는 목적과 상관없는 경우가 많음
• 브라우저 옵션으로 열지 않도록 강제할 수 있음(반드시 노출해야된다면 모달창이 낫다)

모달창

• 중간 중간 사용자에게 다음 진행을 위해 보여지는 경우가 많음
• 현재 페이지와 연관성 있는 경우가 많음

요즘은 팝업보다 모달을 많이 씀

참고문헌

• What is 모달 or 팝업
• 모달