dialog
コンポーネントを実装するために、getmdl.ioの例を続けました。 Chrome、Firefox、AndroidのWebビューでは正常に動作します。 Safariでは、呼び出されなくてもdialog
要素をレンダリングします。私はこの例をscript要素の直前のbody要素の最後に置いています。Safariのデスクトップと携帯電話でMaterial Design liteダイアログをレンダリングする
任意の考えが理解されています。
dialog
コンポーネントを実装するために、getmdl.ioの例を続けました。 Chrome、Firefox、AndroidのWebビューでは正常に動作します。 Safariでは、呼び出されなくてもdialog
要素をレンダリングします。私はこの例をscript要素の直前のbody要素の最後に置いています。Safariのデスクトップと携帯電話でMaterial Design liteダイアログをレンダリングする
任意の考えが理解されています。
Material Design Liteは、すべてのブラウザでサポートされていないdialog-Elementを使用しています。この技術の 仕様が安定していないのでこれは実験的な技術である
(Browser-Compatibilityを参照)、さまざまなブラウザで の使用のための適合表をご確認ください。実験的な技術である の構文と動作は、仕様の変更に応じて、今後のバージョンの ブラウザで変更される可能性があります。
他のブラウザでも動作させるには、dialog-polyfillを含める必要があります。また、<dialog>
- 要素は<body>
タグの直後にあり、他のラッパーの内側にはないことに注意してください。
ダイアログ-ポリフィルからコピーされた参照くださいcodesample:
<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
フィードバックに感謝し、喜んで助けてください! –