Skip to main content

How to use <dialog> to build a barely-any-JS lightbox gallery

5/31/20211 min read

Things to note:

<dialog>
  <form method="dialog>
    <!-- content -->
    <button value="close">X</button>
  </form>
</dialog>
  • You can use the dialog::backdrop pseudo element to style the backdrop of the modal however you like `
dialog::backdrop /* native */, 
dialog + .backdrop /* polyfill */ {
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(3px);
}
Read moreBack
© 2021 by Madole.
GitHub Repository
Last build: 1652523455814