대화상자

대화상자 요소는 모든 종류의 대화를 나타내는 데 유용한 어떻게 작동하는지 알아보세요.

모달 대화상자는 웹페이지에 있는 특별한 유형의 팝업 상자로, 사용자가 자신에게만 집중할 수 있도록 하는 팝업입니다. 대화상자를 팝업으로 표시하는 유효한 사용 사례가 몇 가지 있지만, 그렇게 하기 전에 신중하게 고려해야 합니다. 모달 대화상자는 사용자가 특정 콘텐츠에 집중하도록 강제하고 적어도 일시적으로 페이지의 나머지 부분을 무시합니다.

대화상자는 모달 (대화상자의 콘텐츠만 상호작용할 수 있음)이거나 비 모달 (여전히 상호작용 가능)일 수 있습니다. (대화상자 외부의 콘텐츠가 있는 경우) 모달 대화상자는 페이지 콘텐츠의 나머지 부분 위에 표시됩니다. 나머지 가 비활성 상태이며 기본적으로 반투명 배경화면으로 가려집니다.

대화상자를 만드는 시맨틱 HTML <dialog> 요소 시맨틱, 키보드 상호작용, HTMLDialogElement 인터페이스의 모든 속성과 메서드가 함께 제공됩니다.

모달 대화상자

다음은 모달 <dialog>의 예입니다. '모달 대화상자 열기'가 있는 대화상자를 엽니다. 버튼을 클릭합니다. 대화상자가 열리면 다음 세 가지 방법으로 대화상자를 닫을 수 있습니다. 이스케이프 키, 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()도 마찬가지로 대화상자를 열지만, 배경화면을 추가하거나 아무것도 비활성 상태가 되지 않습니다. Esc 키를 눌러도 모달이 아닌 대화상자가 닫히지 않습니다. 그렇기 때문에 페이지에 닫는 방법에 대해 설명합니다. 이렇게 하면 가까이가 대화상자 밖에 있으면 포커스가 요소로 이동한다는 것을 알 수 있습니다. 최상의 사용자 환경이 아닐 수 있습니다.

대화상자 닫기 버튼은 사양에서 공식적으로 필요하지는 않지만 필요한 것으로 간주합니다. Esc 키 모달 대화상자가 닫히지만 비 모달 대화상자는 닫히지 않습니다. 포커스를 받을 수 있는 표시된 버튼은 접근성과 사용자 환경을 개선합니다.

대화상자 닫기

대화상자를 닫는 데 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>

autofocus 속성이 이 예에서는 닫기 <button>에 설정되어 있습니다. <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 속성은 상속되지 않습니다.

이해도 확인

대화상자 요소에 대한 지식을 테스트합니다.