Lightbox Overlay Page Element has no OnClick method. Help!

I need to send data back to my page when closing a lightbox. The Velo API clearly states that using the in-editor close options (X icon, close button, or clicking on the lightbox overlay) can’t pass a data object - it needs to be handled with the wixWindowFrontend.lightbox.close(dataObj) method. This works fine when I create my own button and attach an onClick handler to it.

However, trying to attach an onClick handler to the overlay page element does not work.

Let’s say my overlay element has the id ‘#lightboxOverlay
When I attach it using the $w(‘#lightboxOverlay’).onClick() selector, I get an error that this page element does not have the onClick function defined. Conversely when I create the handler using an exported function (e.g. export function lightboxOverlay_click()), the function simply never fires on click, but no error is captured.

When I log $w(‘#lightboxOverlay’).type, the element type is “$w.PopupPage”. There is no mention of this element in the Velo docs.
In the Properties and Events section of the Dev Tools panel, I’m referred to “Page Element” in the API, which lists onClick as an available method, but appears to have not inherited to PopupPage correctly.

I’m using Wix Editor in Dev Mode. Thank You!!!

Overlay-Page-Element?

What is it?
Where did you find it?

O, P, Q, R, S, T…
Are you able to find the Overlay-Element inside the shown list?

Or did i missunderstand something?

1 Like

Hi, think it’s legal.

Here’s how you can work around this issue:

  1. Create a custom overlay inside the lightbox:
  • Instead of using the default lightbox overlay, create your own overlay element inside the lightbox. This will allow you to control the onClick event.
  1. Attach the onClick event handler to your custom overlay:
  • Use the wixWindowFrontend.lightbox.close(dataObj) method to close the lightbox and pass data.

Step 1: Add a custom overlay to your lightbox

  • Open your lightbox in the Wix Editor.
  • Add a Box element to cover the entire lightbox (this will be your custom overlay).
  • Set the Box element’s ID to #customOverlay.

Step 2: Attach an onClick event handler to the custom overlay whose name customOverlay