대화상자 요소 - 모달을 쉽게 만들 수 있음
bookmark_borderbookmark
컬렉션을 사용해 정리하기
내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요.
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/에서 '실험용 웹 플랫폼 기능 사용 설정'을 사용 설정하여 사용 설정합니다.
달리 명시되지 않는 한 이 페이지의 콘텐츠에는 Creative Commons Attribution 4.0 라이선스에 따라 라이선스가 부여되며, 코드 샘플에는 Apache 2.0 라이선스에 따라 라이선스가 부여됩니다. 자세한 내용은 Google Developers 사이트 정책을 참조하세요. 자바는 Oracle 및/또는 Oracle 계열사의 등록 상표입니다.
최종 업데이트: 2013-09-22(UTC)
[[["이해하기 쉬움","easyToUnderstand","thumb-up"],["문제가 해결됨","solvedMyProblem","thumb-up"],["기타","otherUp","thumb-up"]],[["필요한 정보가 없음","missingTheInformationINeed","thumb-down"],["너무 복잡함/단계 수가 너무 많음","tooComplicatedTooManySteps","thumb-down"],["오래됨","outOfDate","thumb-down"],["번역 문제","translationIssue","thumb-down"],["샘플/코드 문제","samplesCodeIssue","thumb-down"],["기타","otherDown","thumb-down"]],["최종 업데이트: 2013-09-22(UTC)"],[],[]]