Dialog

<button type="button" id="open-dialog-dialog1"> Open dialog </button> <dialog
  id="dialog1" onclick="document.querySelector(`#${id}`).close()"> <div
    class="dialog-inner"> <header> <h4> Dialog title </h4> <form> <button
          class="small" type="submit" autofocus formmethod="dialog"
          aria-label="Fermer la boîte de dialogue"> <svg viewBox="0 0 24 24"
            width="24" height="24" fill="currentColor" role="img"> <path
              d="M22.1 24c-.5 0-1-.2-1.3-.6L12 14.6l-8.7 8.7c-.7.7-1.9.7-2.7 0s-.7-1.9 0-2.7L9.4 12 .6 3.2C-.1 2.5-.1 1.3.6.5s1.9-.7 2.7 0L12 9.3 20.7.6c.7-.7 1.9-.7 2.7 0s.7 1.9 0 2.7L14.7 12l8.7 8.7c.7.7.7 1.9 0 2.7-.3.4-.8.6-1.3.6z"></path>
          </svg> </button> </form> </header> <p>hello</p> </div> </dialog>
<script>(function(){const id = "dialog1";

  const dialog = document.querySelector(`#${id}`);
  const openBtn = document.querySelector(`#open-dialog-${id}`);
  const closeBtn = dialog.querySelector("button[data-action='close']");
  const validateBtn = dialog.querySelector("button[data-action='validate']");

  const innerDialog = dialog.querySelector('.dialog-inner');
  innerDialog?.addEventListener('click', (event) => event.stopPropagation());

  openBtn?.addEventListener('click', () => dialog.showModal());
  closeBtn?.addEventListener('click', () => dialog.close());
  validateBtn?.addEventListener('click', () => dialog.close());
})();</script>

<Dialog id="dialog1">
  <Fragment slot="opener">Open dialog</Fragment>
  <Fragment slot="title">Dialog title</Fragment>
  <p slot="content">hello</p>
</Dialog>

<button type="button" id="open-dialog-dialog2"> Open dialog </button> <dialog
  id="dialog2" onclick="document.querySelector(`#${id}`).close()"> <div
    class="dialog-inner"> <header> <h4> Dialog title </h4> <form> <button
          class="small" type="submit" autofocus formmethod="dialog"
          aria-label="Fermer la boîte de dialogue"> <svg viewBox="0 0 24 24"
            width="24" height="24" fill="currentColor" role="img"> <path
              d="M22.1 24c-.5 0-1-.2-1.3-.6L12 14.6l-8.7 8.7c-.7.7-1.9.7-2.7 0s-.7-1.9 0-2.7L9.4 12 .6 3.2C-.1 2.5-.1 1.3.6.5s1.9-.7 2.7 0L12 9.3 20.7.6c.7-.7 1.9-.7 2.7 0s.7 1.9 0 2.7L14.7 12l8.7 8.7c.7.7.7 1.9 0 2.7-.3.4-.8.6-1.3.6z"></path>
          </svg> </button> </form> </header> <p><p>Lorem, ipsum dolor sit amet
        consectetur adipisicing elit. Amet ut
        aliquam architecto magni doloribus. Dolores, iure consequuntur minima
        ipsam deleniti suscipit accusantium repellendus odio similique
        distinctio eveniet, autem, fuga sed.</p></p> <footer> <button
        class="small" type="button" data-action="close"> Fermer </button><button
        class="small" type="button" data-action="validate"> Valider </button>
    </footer> </div> </dialog> <script>(function(){const id = "dialog2";

  const dialog = document.querySelector(`#${id}`);
  const openBtn = document.querySelector(`#open-dialog-${id}`);
  const closeBtn = dialog.querySelector("button[data-action='close']");
  const validateBtn = dialog.querySelector("button[data-action='validate']");

  const innerDialog = dialog.querySelector('.dialog-inner');
  innerDialog?.addEventListener('click', (event) => event.stopPropagation());

  openBtn?.addEventListener('click', () => dialog.showModal());
  closeBtn?.addEventListener('click', () => dialog.close());
  validateBtn?.addEventListener('click', () => dialog.close());
})();</script>

<Dialog id="dialog2">
    <Fragment slot="opener">Open dialog</Fragment>
    <Fragment slot="title">Dialog title</Fragment>
    <p slot="content">
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Amet ut
      aliquam architecto magni doloribus. Dolores, iure consequuntur minima
      ipsam deleniti suscipit accusantium repellendus odio similique
      distinctio eveniet, autem, fuga sed.
    </p>
    <Fragment slot="footer-content"
      ><Button class="small" data-action="close">Fermer</Button>
      <Button class="small" data-action="validate">Valider</Button></Fragment
    >
  </Dialog>