모달창 많이 들어봤는데 정확히 뭔지 몰라서 알아보았다.
모달(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 모달
팝업창
- 현재 열려있는 브라우저 페이지에 브라우저 페이지를 띄우는 방식
모달창
- 레이어를 깔음, 페이지 이동 시 자연히 사라짐
팝업창과 모달창의 공통점
별도 레이어를 만들어 방문자에게 원하는 시점에 보여줌
팝업창과 모달창의 차이점
팝업창
- 웹 시작과 동시에 띄우는 경우가 많음
- 현재 의도하는 목적과 상관없는 경우가 많음
- 브라우저 옵션으로 열지 않도록 강제할 수 있음(반드시 노출해야된다면 모달창이 낫다)
모달창
- 중간 중간 사용자에게 다음 진행을 위해 보여지는 경우가 많음
- 현재 페이지와 연관성 있는 경우가 많음
요즘은 팝업보다 모달을 많이 씀
참고문헌
움직이는 만큼 행복해진다