dialog 구성 요소를 구현하기 위해 getmdl.io의 예를 따랐습니다. Chrome, Firefox 및 Android 웹보기에서 정상적으로 작동합니다. Safari에서는 호출되지 않아도 dialog 요소를 렌더링합니다. 예를 script 요소 바로 앞에 body 요소의 끝에 넣었습니다.사파리 바탕 화면 및 전화에서 재료 디자인 라이트 대화 상자 렌더링
어떤 생각을 부탁드립니다.
Material Design Lite는 모든 브라우저에서 지원되지 않는 dialog-Element을 사용합니다. 다양한 브라우저에서 사용에 대한 호환성 표를 확인,이 기술의 사양이 안정되지 않았기 때문에이 실험적인 기술입니다
(Browser-Compatibility 참조). 또한 실험 기술인 의 구문 및 동작은 사양 변경에 따라 브라우저의 이후 버전에서 변경 될 수 있습니다.
다른 브라우저에서 작동되게하려면 dialog-polyfill을 포함해야합니다. <dialog> - 요소는 <body> 태그 바로 뒤에 있고 다른 래퍼 내부에 없어야합니다.
는 codesample 대화-polyfill에서 복사 참조 :
<head>
<script src="dialog-polyfill.js"></script>
<link rel="stylesheet" type="text/css" href="dialog-polyfill.css" />
</head>
<body>
<dialog>
I'm a dialog!
<form method="dialog">
<input type="submit" value="Close" />
</form>
</dialog>
<script>
var dialog = document.querySelector('dialog');
dialogPolyfill.registerDialog(dialog);
// Now dialog acts like a native <dialog>.
dialog.showModal();
</script>
</body>
다이얼로그-요소
는 HTML 5.1에서 제거됩니다, 크롬 실제로 기본적으로 지원하는 유일한 브라우저이기 때문이다. https://github.com/w3c/html/issues/427
고마워요! 이것은 정확한 사례였습니다. – Cunning
도움을 주셔서 감사합니다. –