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();
  }

});

<link rel="stylesheet" href="http://www.warriordudimanche.net/./plugins/Galart/style.css"/> <link rel="stylesheet" href="http://www.warriordudimanche.net/./plugins/Galart/assets/lightbox.css"/> <script src="http://www.warriordudimanche.net/./plugins/Galart/assets/lightbox.js"> <script>[].forEach.call(document.querySelectorAll("[lightbox]"), function(el) { el.lightbox = new Lightbox(el);});

---

► Commentaires