在Safari桌面和手機中的Material Design lite對話框渲染

我遵循getmdl.io的示例來實現dialog組件。它在Chrome，Firefox和Android Web視圖中運行良好;但在Safari中，即使它們未被調用，它也會呈現dialog元素。我已經將示例放在腳本元素之前的body元素的末尾。在Safari桌面和手機中的Material Design lite對話框渲染

任何想法表示讚賞。

來源

2016-12-26 Cunning

Material Design Lite使用dialog-Element，這是所有瀏覽器都不支持的。（見Browser-Compatibility）

這是一個實驗性的技術，因爲這種技術的規範還沒有穩定下來，檢查兼容性表在各種瀏覽器使用。還請注意，隨着規範的變化，實驗技術的語法和行爲在未來版本的瀏覽器中可能會發生變化。

要使其在其他瀏覽器中工作，必須包含dialog-polyfill。另請注意，<dialog> -Elements應該位於<body> -tag後面，而不是在其他任何包裝紙中。

見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

來源

2016-12-27 09:30:31

謝謝！這是確切的情況。 – Cunning

感謝您的反饋，很高興幫助！ –

在Safari桌面和手機中的Material Design lite對話框渲染

回答

相關問題