OGeek|极客世界-中国程序员成长平台

标题: ios - iOS 上的 Material Design Lite 和 dialog-polyfill 模态对话框 [打印本页]

---

作者: 菜鸟教程小白    时间: 2022-12-11 18:02
标题: ios - iOS 上的 Material Design Lite 和 dialog-polyfill 模态对话框

我正在使用 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>

---

Best Answer-推荐答案

检查加载 CSS 的顺序。

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

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

关于ios - iOS 上的 Material Design Lite 和 dialog-polyfill 模态对话框，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40564336/

---

欢迎光临 OGeek|极客世界-中国程序员成长平台 (http://ogeek.cn/)

Powered by Discuz! X3.4