대화상자

모달 대화상자는 웹페이지에 있는 특별한 유형의 팝업 상자로, 사용자가 자신에게만 집중할 수 있도록 하는 팝업입니다. 현재 대화상자를 팝업하는 몇 가지 유효한 사용 사례를 지원하지만, 이 작업을 수행하기 전에 미리 준비해야 합니다. 모달 대화상자는 사용자가 특정 콘텐츠에 집중하도록 하고, 적어도 일시적으로 표시됩니다.

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

대화상자를 만드는 시맨틱 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를 사용하여 스타일을 지정할 수 있습니다. pseudo-element를 사용합니다. 배경화면은 <dialog>가 .showModal() 메서드로 표시될 때만 표시됩니다. 이 pseudo-element는 FullScreen API 사용 시 표시되는 배경화면을 포함한 모든 배경화면과 일치합니다. 예: 화면 또는 모니터와 가로세로 비율이 동일하지 않은 전체 화면 모드에서 동영상을 볼 때.

비모달 대화상자

HTMLDialogElement.show()도 마찬가지로 대화상자를 열지만, 배경화면을 추가하거나 아무것도 비활성 상태가 되지 않습니다. Esc 키를 눌러도 모달이 아닌 대화상자가 닫히지 않습니다. 따라서 메서드를 포함하는 것이 훨씬 더 중요합니다. 닫는 방법에 대해 설명합니다. 이렇게 하면 가까이가 대화상자 밖에 있으면 포커스가 요소로 이동한다는 것을 알 수 있습니다. 최상의 사용자 환경이 아닐 수 있습니다.

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

대화상자 닫기

대화상자를 닫는 데는 HTMLDialogElement.close() 메서드가 필요하지 않습니다. JavaScript가 전혀 필요하지 않습니다. <dialog> 닫기 JavaScript 없이 <form> 또는 formmethod="dialog"에서 method="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 속성 대화상자가 활성 상태이며 상호작용할 수 있음을 의미합니다. 대화상자를 여는 대신 open 속성을 .show() 또는 .showModal()를 사용하는 것보다 더 효율적이면 대화상자는 모달이 없습니다. HTMLDialogElement.open 속성은 대화상자가 모달인지 아닌지에 따라 상호작용이 가능한지에 따라 true 또는 false를 반환합니다.

대화상자를 여는 데 페이지 로드 시 open 속성을 포함한 후 삭제하는 경우 JavaScript가 선호되는 방법이지만 .close()를 사용하여 JavaScript를 사용할 수 없는 경우에도 대화상자를 사용할 수 있도록 할 수 있습니다.

추가 세부정보

tabindex 사용 안 함

대화상자를 열도록 활성화된 요소와 그 안에 포함된 닫기 버튼 (및 다른 콘텐츠)은 대화식이면서도 말이죠 <dialog> 요소는 상호작용이 아니며 포커스를 받지 않습니다. tabindex 속성을 추가하지 마세요. 추가할 수 있습니다.

ARIA 역할

암시적 역할은 dialog입니다. 대화상자가 확인 또는 기타 사용자 응답이 필요한 중요한 메시지를 전달하는 확인 창입니다. role="alertdialog"를 설정하세요. 대화상자에는 액세스 가능한 이름도 있어야 합니다. 표시되는 텍스트로 액세스 가능한 이름을 제공할 수 있는 경우 aria-labelledby="idOfLabelingText"를 추가합니다.

CSS 기본값

브라우저에서는 dialog의 기본 스타일을 제공합니다. Firefox, Chrome, Edge 세트 color: CanvasText; background-color: Canvas; Safari는 user-agent 스타일시트에 color: black; background-color: white;를 설정합니다. color가 상속됨 body 또는 :root가 아닌 dialog에서 발생합니다. 예기치 않은 결과일 수 있습니다. background-color 속성은 상속되지 않습니다.

이해도 확인

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