JavaScript: chiudere un elemento dialog cliccando al di fuori di esso

In alcune interfacce web moderne, il tag dialog viene utilizzato per creare finestre modali native, senza necessità di librerie esterne. Una funzionalità spesso richiesta è quella di chiudere automaticamente il dialog quando l’utente fa clic al di fuori della finestra modale.

Il seguente frammento JavaScript mostra come implementare questo comportamento in modo semplice e diretto:

dialog.addEventListener("click", e => {
  const dialogDimensions = dialog.getBoundingClientRect()
  if (
    e.clientX < dialogDimensions.left ||
    e.clientX > dialogDimensions.right ||
    e.clientY < dialogDimensions.top ||
    e.clientY > dialogDimensions.bottom
  ) {
    dialog.close()
  }
})

Il codice aggiunge un gestore di eventi click all’elemento dialog. Quando l’evento si verifica, il listener ottiene le dimensioni e la posizione del dialog nella pagina tramite getBoundingClientRect().

Viene quindi verificato se le coordinate del clic (clientX e clientY) si trovano al di fuori dei limiti del dialogo. Se l’utente ha cliccato fuori dalla finestra modale, il metodo dialog.close() viene chiamato per chiudere il dialog.

Questa tecnica è utile quando si desidera mantenere un comportamento coerente con quello delle modali tradizionali: chiudersi al clic esterno, migliorando l'usabilità e l’esperienza utente.