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

5/31/2021

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