dialog와 showModal로 포커스를 관리하는 모달 대화상자를 만듭니다.
dialog.showModal()은 대화상자를 최상위 레이어에 모달로 표시하고 바깥 문서를 비활성 상태로 만듭니다. form method=dialog의 버튼은 dialog를 닫을 수 있습니다. 대화상자를 연 버튼으로 포커스를 돌려주는 흐름과 Escape 취소도 확인해야 합니다.
두 버튼은 type이 없어 form method=dialog의 제출 버튼이 되고, 누르면 네트워크 요청 없이 대화상자가 닫히면서 누른 버튼의 value가 dialog.returnValue에 들어갑니다. close 리스너는 그 값이 confirm일 때만 삭제를 선택했습니다를 쓰고 나머지는 취소로 처리한 뒤 opener.focus()로 여는 버튼에 초점을 돌려줍니다. 열려 있는 동안 뒤 화면을 덮는 반투명 막은 dialog::backdrop 규칙이 칠합니다.
returnValue는 showModal로 다시 열어도 비워지지 않고, 인수 없이 dialog.close()로 닫으면 직전 값이 그대로 남습니다. 그래서 예제의 열기 버튼은 dialog.returnValue를 빈 문자열로 만든 뒤 showModal을 불러, 앞에서 고른 삭제가 다음 결과에 섞이지 않게 합니다.
화면에 div를 fixed로 띄우기만 하면 포커스 이동, Escape, 배경 비활성화를 모두 직접 구현해야 합니다. 지원되는 환경에서는 dialog의 기본 동작을 활용하세요.
직접 바꿔보세요대화상자를 열고 Tab과 Escape로 조작한 뒤 close 이벤트의 returnValue를 확인하세요.