openLightbox( )

Opens a lightbox and optionally passes it the given data.

Description

The openLightbox() function returns a Promise which is resolved when the lightbox closes. If the lightbox is closed programmatically using its close() function, and the close() function was invoked with a data parameter, then the Promise resolves to that data object.

If you send a data object to the lightbox, use the getContext() function in the lightbox's code to access the received data.

To pass data to the lightbox that is opened, you must open the lightbox programmatically using the openLightbox() function. If the lightbox is opened automatically when the page loads or by a link from a page element, data will not be passed to the lightbox. Therefore, if you want to pass data 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.

To pass data back to the page that opened the lightbox, you must close the lightbox programmatically using the close() function. If the lightbox is closed by the site visitor clicking the 'X' icon, close button, or lightbox overlay, data will not be passed back the the page that opened the lightbox. Therefore, if you want to make sure data is passed back to the page that opened the lightbox, disable all of the methods mentioned above and create your own method for closing the lightbox programmatically. For example, you can add a button with an onClick event handler that calls the close() function.

Notes: Use the name of the lightbox and not the lightbox's ID when calling openLightbox(). You can find the lightbox's name by selecting the lightbox and clicking the settings button.
Only call openLightBox after the onReady event has fired.

Syntax

function openLightbox(name: string, [data: Object]): Promise<Object>

openLightbox Parameters

NAME

TYPE

DESCRIPTION

name

string

The name of the lightbox to open.

data

Optional

Object

The data to pass to the lightbox.

Returns

Fulfilled - The returned data from the lightbox. Rejected - The error that caused the rejection.

Return Type:

Promise<Object>

Related Content:

openModal( )

Was this helpful?

Open a lightbox

Copy Code

1import wixWindowFrontend from 'wix-window-frontend';
2
3// ...
4
5wixWindowFrontend.openLightbox("LightboxName");

Open a lightbox and send it data

Copy Code

1import wixWindowFrontend from 'wix-window-frontend';
2
3// ...
4
5wixWindowFrontend.openLightbox("LightboxName", dataObj);

Open a lightbox and receive data when it is closed

Copy Code

1import wixWindowFrontend from 'wix-window-frontend';
2
3// ...
4
5wixWindowFrontend.openLightbox("LightboxName")
6  .then( (data) => {
7    let receivedData = data;
8  } );

Open a lightbox, send it data, and receive data back when it is closed

Copy Code

1import wixWindowFrontend from 'wix-window-frontend';
2
3// ...
4
5wixWindowFrontend.openLightbox("LightboxName", dataObj)
6  .then( (data) => {
7    let receivedData = data;
8  } );

Open and close a lightbox, and send information between the lightbox and the page

In this example, we demonstrate how to open and close a lightbox using code, as well as how to send information from the page to the lightbox and from the lightbox to the page. You can test out the code in our example template.

Copy Code

1/******************
2 * Home Page Code *
3 ******************/
4
5import { openLightbox } from 'wix-window-frontend';
6
7$w.onReady(() => {
8  $w('#openButton').onClick(async () => {
9    const dataToSend = {
10      greeting: $w('#greeting').value,
11      subject: $w('#subject').value
12    };
13
14    const lightBoxResponse = await openLightbox('Greeting Lightbox', dataToSend);
15    $w('#returnedMessage').text = `YOU CHOSE: ${lightBoxResponse}`;
16    $w('#returnedMessage').show();
17  });
18});
19
20/*****************
21 * Lightbox Code *
22 *****************/
23
24import { lightbox } from 'wix-window-frontend';
25
26$w.onReady(function () {
27  let receivedData = lightbox.getContext();
28
29  $w('#greeting').text = receivedData.greeting.toUpperCase();
30  $w('#subject').text = receivedData.subject.toUpperCase();
31
32  $w('#blueButton').onClick(clickHandler);
33  $w('#greenButton').onClick(clickHandler);
34  $w('#pinkButton').onClick(clickHandler);
35});
36
37function clickHandler(event) {
38  lightbox.close(event.target.label);
39}
40
41

A scenario where information is passed between a page and a lightbox

This example demonstrates how to pass data from a page to a lightbox that it opens and from the lightbox back to the page as it closes.

It assumes that the page has:

An open button that is used to open the lightbox.
Two text inputs where information that is to be passed to the lightbox is entered.
Two text elements where information that is passed from the lightbox is displayed.

It assumes that the lightbox has:

A close button that is used to close the lightbox.
Two text inputs where information that is to be passed to the page is entered.
Two text elements where information that is passed from the page is displayed.

Copy Code

1/*************
2 * Page Code *
3 *************/
4
5import wixWindowFrontend from 'wix-window-frontend';
6
7export function openButton_click(event) {
8  wixWindowFrontend.openLightbox("MyLightBox", {
9    "pageSend1": $w('#pageSend1').value,
10    "pageSend2": $w('#pageSend2').value
11  })
12  .then( (data) => {
13    $w('#pageReceive1').text = data.lightBoxSend1;
14    $w('#pageReceive2').text = data.lightBoxSend2;
15  } );
16}
17
18/*****************
19 * Lightbox Code *
20 *****************/
21
22import wixWindowFrontend from 'wix-window-frontend';
23
24$w.onReady( function () {
25  let received = wixWindowFrontend.lightbox.getContext();
26  $w('#lightBoxReceive1').text = received.pageSend1;
27  $w('#lightBoxReceive2').text = received.pageSend2;
28} );
29
30export function closeButton_click(event) {
31  wixWindowFrontend.lightbox.close( {
32    "lightBoxSend1": $w('#lightBoxSend1').value,
33    "lightBoxSend2": $w('#lightBoxSend2').value
34  } );
35}
36