모달/모달리스

모달/모달리스란?

윈도우의 form(형식)이나 Dialog(대화상자)를 모달 혹은 모달리스로 표현할 수 있다.

모달

간단하게는 새 모달창이 열렸을 때, 기존에 있던 창을 사용하지 못하는 방식.
어느 다이얼로그 창이 프로그램의 제어권을 독점해서 이 창이 종료되기 전엔 다른 작업을 할 수 없게 하는 것.
별개의 윈도우 창은 작업 가능.
중요한 메세지를 표시하는 다이얼로그는 거의 모달로 나타낸다.

모달리스

모달리스는 어느 하나의 다이얼로그 창이 있어도 프로그램 제어권을 독점하지 않으므로 다른 작업을 할 수 있는 것.
모달리스는 사용자가 순서에 관계 없이 액세스 할 수 있기 때문에, 사용자의 동작에 관계 없이 응용용 프로그램의 상태를 일관성 있게 유지해야 한다.(프로그래밍하기 더욱 어려움)
ex. 찾기 대화 상자 등 자주 사용하는 명령이나 정보 표시.

접근성 방면에서도 모달/모달리스의 사용은 중요하다. 일반적으로 쓰는 레이어로 덮어 쓰는 형식의 모달을 사용할 경우, 스크린 리더가 순서를 구분하지 못하고 정보를 전달하게 된다.

::backdrop

javascript의 showModal과 함께 동작하는 css property. 모달이 동작하는 동안 background에 스크린처럼 덮이는 역할을 한다.

Mdn에 사용 예시가 있어서 연습해본 모달창

여기서 의문
javascript에 showModal까지만 작업하고 close에 대한 기타적인 작업을 안했는데도 button을 누르면 바로 창이 꺼지는 이유를 모르겠다.
value값에 cancel과 default가 들어가서인가 했는데 그건 아니라서 showModal의 기능인가 하고 찾아봤더니 원리는 dialog 안의 form 태그였다.
showModal의 사용예시

showModal이 동작하는 원리가 dialog가 갖고 있는 form태그가 동작하면서 열리는 것이고, 거기서 cancel또는 submit 버튼을 통해 close 이벤트가 발생하는 것.

근데 여기서 또 의문...
button 값에서 cancel를 제거했을 때도 close 액션은 동작했는데 button 자체를 div로 바꾸니 그때는 동작하지 않았다. 그렇다면, value에다가 cancel,default 값을 주지 않고 그냥 button이 눌리는 것만으로도 form태그가 전송이 되는건가?

답: button태그는 form태그의 id값과 연동해서 눌렸을 시에 정보를 제출하는 역할을 함. 만약 id 값을 설정 안했대도 부모 요소의 form태그와 자동 연동이 됨.