0

dialogコンポーネントを実装するために、getmdl.ioの例を続けました。 Chrome、Firefox、AndroidのWebビューでは正常に動作します。 Safariでは、呼び出されなくてもdialog要素をレンダリングします。私はこの例をscript要素の直前のbody要素の最後に置いています。Safariのデスクトップと携帯電話でMaterial Design liteダイアログをレンダリングする

enter image description here

任意の考えが理解されています。

答えて

1

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

+0

ありがとうございました!これは厳密なケースでした。 – Cunning

+0

フィードバックに感謝し、喜んで助けてください! –

関連する問題