2

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

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

我已经尝试过在几个地方发布的建议，将“光标：指针”放在 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>
4

1 回答 1

0

检查加载 CSS 的顺序。

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

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

于 2017-01-20T02:22:10.087 回答