Question

我使用Material Design Lite（http://getmdl.io）和dialog-polyfill（https://github.com/GoogleChrome/dialog-polyfill）作为模态对话框。

我的桌面浏览器（Chrome，Safari等）上的一切都很棒，但在iOS（Chrome和Safari）上，我无法点击模式对话框。它只是没有回应。

我已经尝试过我已经看到过几个地方放置的建议＆＃34;光标：指针＆＃34;在CSS中，但要么我没有正确地执行，要么它无法正常工作。

这是我代码中的典型模态对话框：

<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的顺序。

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

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

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

1 个答案: