Using dialog elements for a lightbox

I thought I would try using <dialog> elements to create a light box. I’m almost there (I think) but I’m not sure how to get the matching dialog to open when I click the appropriate image.

This is my codepen

Does this work?

img.forEach((element, index) => element.addEventListener("click", function () {d[index].showModal();}));


I came up with the same and it appears to work


Thank you, gents :slight_smile:

1 Like

I thought it might be better where there could be a couple of dozen thumbnails to have a single modal and use a data value for the larger image. I’m almost there but am having trouble targeting the image within the modal…

New Pen:

Edit: I think I found the answer!

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.