모달 대화상자는 웹페이지에서 사용자를 방해하는 특수한 유형의 팝업 상자입니다. 대화상자를 표시하는 유효한 사용 사례가 있지만 대화상자를 추가하기 전에 신중하게 고려해야 합니다. 모달 대화상자는 사용자가 특정 콘텐츠에 집중하고 페이지의 나머지 부분은 일시적으로 무시하도록 합니다.
대화상자는 다음과 같을 수 있습니다.
- 모달: 사용자는 대화상자 내의 콘텐츠와만 상호작용할 수 있습니다. 모달 대화상자는 페이지 콘텐츠 위에 표시됩니다. 페이지는 inert로 설정되며 기본적으로 반투명 배경으로 가려집니다.
- 비모달: 사용자가 대화상자 외부의 콘텐츠와 상호작용할 수 있습니다.
대화상자를 만드는 시맨틱 HTML <dialog> 요소는 시맨틱, 키보드 상호작용, HTMLDialogElement 인터페이스의 모든 속성 및 메서드와 함께 제공됩니다.
모달 대화상자
모달 <dialog>의 예를 살펴보세요. 모달 대화상자 열기를 클릭합니다.
대화상자가 열리면 세 가지 방법으로 대화상자를 닫을 수 있습니다. Esc 키, formmethod="dialog"가 설정된 버튼이 있는 양식 제출(또는 양식 자체에 method="dialog"가 설정된 경우), HTMLDialogElement.close() 메서드입니다.
HTMLDialogElement에는 HTMLElement에서 상속된 모든 메서드와 함께 세 가지 기본 메서드가 있습니다.
dialog.show() /* opens the dialog */
dialog.showModal() /* opens the dialog as a modal */
dialog.close() /* closes the dialog */
이 <dialog>는 HTMLDialogElement.showModal() 메서드로 열렸으므로 모달 대화상자입니다. 모달 대화상자를 열면 대화상자 자체를 제외한 모든 항목이 비활성화되고 가려집니다. 대화상자 외부의 UI 위로 마우스를 가져가면 모든 요소가 pointer-events: none;가 설정된 것처럼 작동합니다. 대화상자를 여는 버튼도 상호작용에 반응하지 않습니다.
대화상자가 열리면 포커스가 대화상자로 이동합니다. 포커스는 대화상자 내에서 순차적 키보드 탐색 순서의 첫 번째 요소에 설정됩니다.
tab 키를 반복해서 누르면 모달이 열려 있는 동안 대화상자 내의 콘텐츠만 포커스를 받을 수 있습니다. 모달 외부의 모든 항목은 비활성 상태로 유지됩니다.
대화상자가 닫히면 모달 여부와 관계없이 대화상자를 연 요소로 포커스가 돌아갑니다. 사용자 작업 없이 프로그래매틱 방식으로 대화상자를 열지 않습니다. 꼭 필요한 경우, 특히 사용자가 대화상자와 상호작용하지 않고 대화상자를 닫는 경우 대화상자가 열리기 전의 위치로 포커스를 반환해야 합니다.
활성 대화상자 이외의 요소와 모든 하위 요소를 사용 중지하는 데 사용할 수 있는 전역 inert 속성이 있습니다. showModal()를 사용하여 모달 대화상자를 열면 기본적으로 비활성 또는 비활성화가 발생합니다. 속성이 명시적으로 설정되지 않았습니다.
대화상자 이외의 모든 항목을 가리는 배경은 ::backdrop 의사 요소를 사용하여 스타일을 지정할 수 있습니다. 배경은 <dialog>가 .showModal() 메서드로 표시될 때만 표시됩니다. 이 가상 요소는 FullScreen API를 사용할 때 표시되는 배경을 비롯한 모든 배경과 일치합니다(예: 화면 또는 모니터와 가로세로 비율이 다른 전체 화면 모드에서 동영상을 볼 때).
비모달 대화상자
HTMLDialogElement.show()도 마찬가지로 대화상자를 열지만 배경을 추가하거나 비활성 상태로 만들지 않습니다. 이스케이프 키는 모달 대화상자만 닫고 비모달 대화상자는 닫지 않습니다. 따라서 비모달 대화상자를 닫는 방법을 포함하는 것이 더욱 중요합니다. 닫기 옵션이 대화상자 외부에 있는 경우 포커스는 대화상자를 연 요소로 돌아갑니다. 이는 이상적인 사용자 환경이 아닙니다.
대화상자를 닫는 버튼은 사양에서 공식적으로 요구하지는 않지만 필수라고 생각하세요. 포커스를 받을 수 있는 표시되는 버튼은 접근성과 사용자 환경을 개선합니다.
대화상자 닫기
대화상자를 닫는 데 HTMLDialogElement.close() 메서드는 필요하지 않습니다. JavaScript가 전혀 필요하지 않습니다. JavaScript 없이 <dialog>를 닫으려면 <form>에 method="dialog"를 설정하거나 버튼에 formmethod="dialog"를 설정하여 대화상자 메서드가 있는 양식을 포함합니다.
사용자가 dialog 메서드를 사용하여 제출하면 사용자가 입력한 데이터의 상태가 유지됩니다. 제출 이벤트가 있는 동안 양식은 제약 조건 검증을 거칩니다(novalidate가 설정되지 않은 경우). 사용자 데이터가 삭제되거나 제출되지 않습니다. JavaScript 없이 닫기 버튼을 만들 수 있습니다.
<dialog open>
<form method="dialog">
<button type="submit" autofocus>close</button>
</form>
</dialog>
이 예에서 닫기 <button>에 autofocus 속성이 설정되어 있는 것을 확인할 수 있습니다. <dialog> 내에 autofocus 속성이 설정된 요소는 대화상자가 표시된 상태로 페이지가 이미 로드된 경우에만 페이지 로드 시 포커스를 받습니다. 페이지가 로드되지 않은 경우 대화상자가 열릴 때 이러한 요소에 포커스가 설정됩니다.
대화상자가 열리면 다른 요소에 autofocus 속성이 설정되어 있지 않는 한 대화상자 내에서 포커스를 받을 수 있는 첫 번째 요소가 포커스를 받습니다. 닫기 버튼에 autofocus 속성을 설정하면 대화상자가 열릴 때 포커스를 받습니다. 하지만 <dialog> 내에 autofocus를 포함하는 것은 신중하게 고려해야 합니다. 자동 포커스 요소 앞에 있는 시퀀스의 모든 요소는 건너뜁니다.
이 속성에 관한 자세한 내용은 포커스 모듈에서 설명합니다.
HTMLDialogElement 인터페이스에는 returnValue 속성이 포함됩니다. method="dialog"가 있는 양식을 제출하면 returnValue가 양식을 제출하는 데 사용된 제출 버튼의 name(있는 경우)로 설정됩니다. <button type="submit" name="toasty">close</button>를 작성하면 returnValue는 toasty가 됩니다.
대화상자가 열리면 불리언 open 속성이 표시됩니다. 즉, 대화상자가 활성 상태이며 상호작용할 수 있습니다.
.show() 또는 .showModal()가 아닌 open 속성을 추가하여 대화상자를 열면 대화상자가 모달리스입니다. HTMLDialogElement.open 속성은 대화상자가 모달인지 여부가 아니라 상호작용에 사용할 수 있는지에 따라 true 또는 false를 반환합니다.
JavaScript는 대화상자를 여는 데 선호되는 방법이지만, 페이지 로드 시 open 속성을 포함한 후 .close()로 삭제하면 JavaScript를 사용할 수 없는 경우에도 대화상자를 사용할 수 있습니다.
추가 세부정보
tabindex 사용 안함
대화상자를 열기 위해 활성화된 요소와 대화상자에 포함된 닫기 버튼(및 기타 콘텐츠)은 포커스를 받을 수 있으며 상호작용이 가능합니다. <dialog> 요소는 대화형이 아니며 포커스를 받지 않습니다. 대화상자 자체에 tabindex 속성을 추가하지 마세요.
ARIA 역할
암시적 역할은 dialog입니다.
대화상자가 사용자 응답이나 확인이 필요한 메시지를 전달하는 확인 창인 경우 role="alertdialog"를 설정합니다.
대화상자에 액세스 가능한 이름을 포함합니다. 표시되는 텍스트가 액세스 가능한 이름을 제공할 수 있는 경우 aria-labelledby="idOfLabelingText"를 추가합니다.
CSS 기본값
브라우저는 dialog에 기본 스타일을 제공합니다. Firefox, Chrome, Edge는 color: CanvasText; 및 background-color: Canvas;를 설정합니다. Safari는 사용자 에이전트 스타일시트에서 color: black; background-color: white;를 설정합니다.
color는 body 또는 :root 대신 dialog에서 상속되며, 이는 예상치 못한 결과일 수 있습니다. background-color 속성은 상속되지 않습니다.
이해도 테스트
대화상자 요소에 관한 지식을 테스트합니다.
대화상자 뒤의 영역에 스타일을 지정하려면 어떻게 해야 하나요?
::background 의사 요소 사용::backdrop 의사 요소 사용background 속성 사용