ios - iOS 上的 Material Design Lite 和 dialog-polyfill 模态对话框

Question

我将 Material Design Lite ( http://getmdl.io ) 与 dialog-polyfill ( https://github.com/GoogleChrome/dialog-polyfill ) 一起用于模态对话框。

在我的桌面浏览器(Chrome、Safari 等)上一切正常，但在 iOS(Chrome 和 Safari)上，我无法在模态对话框中点击。它只是没有响应。

我已经尝试过我在几个地方看到的在 CSS 中放置“cursor: pointer”的建议，但要么我没有正确地做，要么它不工作。

这是我的代码中的典型模式对话框:

<dialog class="mdl-dialog" id="delete_alias_confirm_dialog"> 
<h4 class="mdl-dialog__title">
    Delete alias 
</h4>
<div class="mdl-dialog__content" id="delete_alias_confirm_dialog_content">
    <p>
        Alias [ALIAS NAME] has been successfully deleted. 
    </p>
    <form action="#">
        <div class="mdl-dialog__actions">
            <button type="button" class="mdl-button mdl-button--raised mdl-button--colored" onClick="delete_alias_confirm_dialog.close()" id="delete_alias_confirm_dialog_ok_button">OK</button> 
        </div>
    </form>
</div>
</dialog>

<script>
    var delete_alias_confirm_dialog = document.querySelector('#delete_alias_confirm_dialog');

    if (! delete_alias_confirm_dialog.showModal) { 
      dialogPolyfill.registerDialog(delete_alias_confirm_dialog);
    }

    var delete_alias_curr_name=""
    function show_delete_alias_confirmation(clicked_element) {
        delete_alias_curr_name=((clicked_element.parentNode).parentNode).parentNode.parentNode.querySelector('#alias_name').innerText
        var delete_alias_dialog_delete_button=document.querySelector('#delete_alias_dialog_delete_button');
        var delete_alias_dialog_alias_name=document.querySelector('#delete_alias_dialog_alias_name');
        delete_alias_dialog_alias_name.innerHTML=delete_alias_curr_name
        delete_alias_dialog.showModal();
        delete_alias_dialog_delete_button.blur();
    }
</script>

Answer 1

检查加载 CSS 的顺序。

如果您在 material.min.css 之前加载 dialog-polyfll.css，这可能是问题的根源。

同时检查您是否没有重复的dialog，这也会导致在 IOS 上无法关闭的对话框。