대화상자 요소 - 모달을 쉽게 만들 수 있음

키타무라 에이지
키타무라 에이지

Chrome Canary에서 플래그 뒤에 있는 대화상자 요소를 지원합니다. dialog 요소는 웹페이지의 팝업에 사용할 수 있습니다.

  • show(): 대화상자를 엽니다.
  • close(): 대화상자를 닫습니다. 선택적 인수를 사용합니다. 이 인수가 있는 경우 dialog.returnValue가 설정됩니다.
  • showModal(): 모달 대화상자를 엽니다.
  • ::backdrop: 모달 대화상자 뒤의 배경에 스타일을 지정하는 유사 요소
  • close 이벤트: 대화상자가 닫힐 때 실행됩니다.

2013년 12월 16일 업데이트

이제 dialog 요소가 다음을 지원합니다.

  • cancel 이벤트: 모달 대화상자에서 Esc 키를 누르면 실행됩니다. 이 이벤트는 event.preventDefault()을(를) 사용하여 취소할 수 있습니다.
  • autofocus 속성: autofocus 속성이 있는 모달 대화상자의 첫 번째 양식 컨트롤은 대화상자가 표시될 때 포커스가 맞춰집니다(있는 경우). 이러한 요소가 없으면 첫 번째 포커스 가능한 요소에 포커스가 설정됩니다.
  • form[method="dialog"]: 대화상자 내에서만 유효합니다. 양식을 제출하면 대화상자를 닫고 dialog.returnValue를 사용된 제출 버튼 값으로 설정합니다.

실시간 데모 및 폴리필을 통해 세부정보를 확인하세요.

chrome://flags/에서 '웹 플랫폼 실험용 기능 사용 설정'을 사용 설정하여 사용 설정하세요.