dialog 대화상자

개념 이해하기

dialog.showModal()은 대화상자를 최상위 레이어에 모달로 표시하고 바깥 문서를 비활성 상태로 만듭니다. form method=dialog의 버튼은 dialog를 닫을 수 있습니다. 대화상자를 연 버튼으로 포커스를 돌려주는 흐름과 Escape 취소도 확인해야 합니다.

예제에서는 dialog.showModal(); dialog.close(); 부분부터 찾으세요. 태그 이름만 외우기보다 부모·자식 관계와 속성이 어느 요소에 붙는지를 한 덩어리로 읽으면 구조를 고치기 쉬워집니다.

사용자 동작에 따라 상태가 바뀌는 화면에서 사용합니다. 보이는 모양뿐 아니라 키보드 조작, 현재 상태를 알리는 문구와 포커스 이동까지 한 흐름으로 확인하세요.

먼저 현재 결과를 확인한 뒤 대화상자를 열고 Tab과 Escape로 조작한 뒤 close 이벤트의 returnValue를 확인하세요. 수정 전에는 예상한 변화를 한 문장으로 적고, 실행 뒤에는 정보 순서와 키보드 접근까지 그대로인지 살펴보세요.