我关注了getmdl.io的示例来实现 dialog 组件。它在 Chrome、Firefox 和 Android Web View 中运行良好；但在 Safari 中，它会呈现 dialog 元素，即使它们未被调用也是如此。我已将示例放在 body 元素的末尾，就在脚本元素之前。
如有任何想法，我们将不胜感激。
最佳答案
Material Design Lite 使用 dialog-Element ，并非所有浏览器都支持。 (参见 Browser-Compatibility)
This is an experimental technology Because this technology's specification has not stabilized, check the compatibility table for usage in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the specification changes.
要使其在其他浏览器中工作，您必须包含 dialog-polyfill .另请注意，<dialog> - 元素应直接位于 <body> 之后-tag 而不是在任何其他包装器中。
查看从 dialog-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>
Dialog-Element 也将从 HTML 5.1 中删除，因为 chrome 是唯一真正原生支持它的浏览器。参见 https://github.com/w3c/html/issues/427
关于javascript - Material Design lite 对话框在 Safari 桌面和手机中呈现，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41334906/