[Java Script] Modal(모달) 생성

 

 

 

잡담

웹사이트를 돌다 보면 경고메시지와 함께 다른 창을 건들 수 없는 순간이 옵니다. 해당 창을 모달 창이라고 하는데요 프로젝트를 진행하면서 경고메시지나 또는 새로운 창에서 작업 후 해당 값을 입력하게 하는(주소입력) 경우 모달창을 많이 사용했습니다. 오늘은 모달창에 대해서 알아보도록 하겠습니다.

 

---

모달(Modal) 창 이란?

모달 창(modal window)은 웹 개발에서 사용자 인터페이스의 중요한 요소 중 하나로, 사용자의 주의를 특정 작업이나 메시지로 집중시키기 위해 사용됩니다.

모달 창은 일반적으로 페이지의 나머지 부분과 상호작용할 수 없게 만들고, 사용자가 특정 작업을 완료하거나 창을 닫을 때까지 페이지의 나머지 부분이 비활성화됩니다. 이로 인해 중요한 정보 전달이나 사용자 입력을 강제하는 데 효과적입니다.

 

---

모달 창의 주요 특징

1. 중첩된 창: 모달 창은 현재 페이지 위에 중첩되어 나타납니다. 이를 통해 사용자는 페이지의 다른 부분을 보면서도 모달 창의 내용에 집중할 수 있습니다.
2. 사용자 행동 강제: 모달 창은 사용자가 특정 작업(예: 확인, 취소, 입력)을 완료하기 전에는 다른 작업을 할 수 없도록 합니다. 이는 중요한 경고 메시지, 입력 폼, 또는 확인 창에서 유용하게 사용됩니다.
3. 배경 흐림: 일반적으로 모달 창이 나타날 때 배경이 흐릿하게 처리됩니다. 이는 사용자에게 모달 창이 현재 활성화된 요소임을 명확히 인식시키고 주의를 집중시키는 데 도움이 됩니다.
4. 다양한 콘텐츠 포함 가능: 모달 창 안에는 텍스트, 이미지, 입력 폼, 비디오 등 다양한 종류의 콘텐츠를 포함할 수 있습니다. 이는 유연한 사용자 인터페이스 설계를 가능하게 합니다.

 

---

모달 창의 용도

1. 확인 및 경고 메시지: 중요한 정보를 사용자에게 알리거나 사용자에게 중요한 결정을 확인하는 데 사용됩니다. 예를 들어, 삭제 확인 메시지, 시스템 경고 등이 있습니다.
2. 입력 폼: 사용자가 필요한 정보를 입력하도록 할 때 사용됩니다. 예를 들어, 로그인 창, 회원 가입 폼, 데이터 입력 폼 등이 있습니다.
3. 멀티미디어 콘텐츠 표시: 이미지 갤러리, 비디오 플레이어 등 멀티미디어 콘텐츠를 표시하는 데 사용됩니다.
4. 유도 및 안내: 사용자가 특정 작업을 수행하도록 유도하거나 안내하는 데 사용됩니다. 예를 들어, 사용 설명서, 기능 소개 등이 있습니다.

---

모달 예제

See the Pen Modal by 이현석 (@loxshqac-the-styleful) on CodePen.