Let’s shine a light on working with light boxes!
Here are some FAQs (and their answers!) for working with lightboxes.
How do I pass data between a page and a lightbox?
When you open a lightbox using the openLightbox() function, you can pass an object containing data to be used in the lightbox. In the lightbox’s code, you call the getContext() function to retrieve the data sent by the openLightbox() function.
When you close the lightbox using the lightbox.close() function, you can pass an object containing data to be used by the page that opened the lightbox. This data is retrieved from the resolution of the Promise returned by the openLightbox() function.
When I open a lightbox using openLightbox() , my getContext() function returns ‘undefined’. Why?
The getContext() function only returns a data object passed if the lightbox was opened programmatically using the openLightbox() function. If the lightbox opened automatically when the page loaded or via a link from a page element, data will not be passed to the lightbox.
Make sure Automatically display lightbox on pages is set to No in the Lightbox Settings panel in the Editor and don’t set any element’s link to open the lightbox. Instead, create your own method for opening the lightbox programmatically. For example, you can add a button with an onClick() event handler that calls the openLightbox() function.
How do I close a lightbox?
Although you can open a lightbox using the top-level wix-window API with the openLightbox() function, there is no top-level wix-window function for closing lightboxes. That’s because once the lightbox is open, control is moved away from the page that opened the lightbox to the lightbox itself. Therefore, to close the lightbox, you have to call the wix-window.lightbox.close() function from within the lightbox’s code.