Modal image overlay

Ask the community
,
1

Hi,
I’m new to the forum - this is my first post :slight_smile:

Is there a recommended way to create a modal image overlay that will display a large version of a small image which is shown on the page?

I’ve used a combination of onclick + lightbox, but this seems like a cumbersome solution.

Thanks,
Thirsty cat.

2

You can use a Box . Make it the desired size for your images. Make the box hidden, and then show when you set the image to be displayed.

3

Thanks Yisrael for the prompt reply!

That’s indeed something I’ve considered, but wasn’t quite sure on the following:

  • Is it possible to make the Box modal?
  • How to hide the larger element once it’s shown.

Would appreciate any ideas you might have - maybe I’m missing something obvious?

4

Well, the Box component is just that, a Box. You’ll have to take care of the details (making it modal) yourself. But, it’s much “lighter” than a Lightbox (OK - I know that sounds funny). You can create an onClick() event handler that handles more than one, and check which button or small image was clicked inside the event handler. This way you can have reusable code and have all of the logic centralized.

5

Thanks again Israel, will try to see if this direction works for me.