Come chiudere il nuovo tag html <dialog> facendo clic sul suo :: fondale

Question

Non ho trovato alcuna soluzione o soluzione integrata per la chiusura dell'elemento html5 facendo clic sul suo sfondo (:: sfondo), sebbene sia chiaramente una base funzionalità.

Answer 1

I clic sullo sfondo possono essere rilevati utilizzando il rettangolo di selezione della finestra di dialogo.

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

Un'altra soluzione più efficiente è quello di avvolgere il dialog -CONTENUTO in un div con padding: 0. In questo modo è possibile verificare event.target dell'evento clic, che fa riferimento alla finestra di dialogo in caso di sfondo e qualsiasi altro elemento all'interno di div in caso di modale reale.

Non controllando le dimensioni effettive, è possibile impedire i cicli di layout.

Answer 3

Per chiunque inciampo su questa domanda e vuole seguire la soluzione consigliata dal @meaku, ecco come ho risolto utilizzare un per incapsulare l'elemento e non lavorare con getBoundingClientRect() Calcolo:

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>