Material Design Lite 및 iOS의 대화 폴리 폴리 모달 대화 상자

Question

모달 대화 상자에 재질 디자인 라이트 (http://getmdl.io)와 대화 상자 폴리 폴리 (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를로드하는 순서 :

여기 내 코드에서 전형적인 모달 대화 상자입니다.

dialog-polyfll.css을 material.min.css 전에로드하는 경우 문제의 원인 일 수 있습니다.

또한 dialog 복제본이 없는지 확인하십시오.이 경우 IOS에서 닫을 수없는 대화 상자가 표시됩니다.