2

モーダル ダイアログ ボックスには、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>
4

1 に答える 1