<div class="container">
  <p>Gli elementi dialog hanno un backdrop che può essere personalizzato attraverso lo stile css.</p>

  <button onclick="openDialog()">Apri Finestra</button>
  
  <dialog>
    <h3>Finestra di Dialogo</h3>
    <p>Questa è una finestra di dialogo!</p>
    <button onclick="closeDialog()">Chiudi</button>
  </dialog>  
</div>

dialog::backdrop {
  background-color: yellow;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: sans-serif;
  background-color: #1b1b1b;
  color: #eee;
}

.container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 2rem;
}

button {
  padding: .375rem .75rem;
  font-size: 120%;
  border-radius: 8px;
  color: white;
  background-color: blue;
  cursor: pointer;
}

const dialog = document.querySelector('dialog');

function openDialog() {  
  dialog.showModal();
}

function closeDialog() {  
  dialog.close();
}