새로운 HTML <dialog> 태그를 클릭하여 닫는 방법 :: 배경

Question

html5 요소를 닫기 위해 html5 요소를 닫기위한 해결책이나 해결 방법을 발견하지 못했습니다. (배경 : : 배경) 분명히 기본이지만 기능.

Answer 1

대화 상자 경계 사각형을 사용하여 배경 클릭을 감지 할 수 있습니다.

var dialog = document.getElementByTagName('dialog'); 
dialog.showModal(); 
dialog.addEventListener('click', function (event) { 
    var rect = dialog.getBoundingClientRect(); 
    var isInDialog=(rect.top <= event.clientY && event.clientY <= rect.top + rect.height 
     && rect.left <= event.clientX && event.clientX <= rect.left + rect.width); 
    if (!isInDialog) { 
     dialog.close(); 
    } 
}); 

Answer 2

또 다른 더 효율적인 솔루션은 padding: 0와 div에서 dialog -content을 래핑하는 것입니다. 이 방법을 사용하면 클릭 이벤트의 event.target을 확인할 수 있습니다.이 이벤트는 배경의 경우 대화 상자를 참조하고 실제 모달 인 경우 div의 다른 요소를 참조합니다.

실제 크기를 확인하지 않으면 레이아웃주기를 방지 할 수 있습니다.

const popup = document.getElementById('popup'); 
 
const popupDialog = document.getElementById('popup-dialog'); 
 
popup.addEventListener('click', function(e){ 
 
    console.info(e.target.tagName); 
 
    if (e.target.tagName === 'DIALOG') popupDialog.close() 
 
});

<div id="popup" style="padding: 0"> 
 
    <dialog id="popup-dialog" style="display:none;"> 
 
     <h4>Dialog Title</h4> 
 
     <footer class="modal-footer"> 
 
      <button id="popup-close" type="button">close</button> 
 
      <button id="popup-ok" type="button">ok</button> 
 
     </footer> 
 
    </dialog> 
 
</div>

: 누군가가이 질문에 걸림돌와 @meaku에서 권장하는 해결 방법을 수행하고 싶어 들어

Answer 3

, 여기에 나는 그것이 계산) (getBoundingClientRect 작업 요소를 캡슐화하기를 사용하지 않도록 해결 방법은