Notes rapides sur la balise <dialog> et le JS .showModal(), .close()

On crée la boîte de dialogue en HTML/CSS

<dialog id="modal-dialog">
  <div class="dialog-content">
    <h3>Title</h3>
    <p>Question ?</p>
    <ul class="dialog-actions">
      <li><button type="button" data-action="confirm">Yes</button></li>
      <li><button type="button" data-action="cancel">Cancel</button></li>
    </ul>
  </div>
</dialog>

On crée le JS adapté

En gros on récupère le click sur l'objet document et on le traite en fonction de l'action prévue dans l'attribut data-action

const dialog = document.getElementById("modal-dialog"");    

document.addEventListener("click", ({ target }) => {
  // ... show logic
  // ... close logic

  if (target.matches('[data-action="confirm"]')) {
       // action si confirm
  }

  if (target.matches('[data-action="cancel"]')) {
       // action si cancel
      dialog.close();
  }

});