CodeAPI

lightbox

A lightbox pops up on your site to grab your visitor's attention.

To use the Lightbox API, import wixWindow from the wix-window module:

   import wixWindow from 'wix-window';

The APIs in wix-window.lightbox can only be used in front-end code.

Table of Contents

FUNCTIONS

?
Perform actions on an object.
close( )Closes the lightbox.
getContext( )Returns the data object that was passed to a lightbox.

close( )

Closes the lightbox.

Description

The close() function closes the lightbox and returns the given data to the openLightbox() function that was used to open the lightbox.

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.

Syntax

function close([data: Object]): void
PARAMETERS
?
Values that you pass to a function.
data(Optional)
Object
The data to pass back to openLightbox() function.

Examples

Close the lightbox

import wixWindow from 'wix-window';

// ...

wixWindow.lightbox.close();

Close the lightbox and pass back data to the opening function

import wixWindow from 'wix-window';

// ...

wixWindow.lightbox.close(dataObj);

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:

  • An 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.
/*************
 * Page Code *
 *************/

import wixWindow from 'wix-window';

export function openButton_click(event) {
  wixWindow.openLightbox("MyLightBox", {
    "pageSend1": $w('#pageSend1').value,
    "pageSend2": $w('#pageSend2').value
  })
  .then( (data) => {
    $w('#pageReceive1').text = data.lightboxSend1;
    $w('#pageReceive2').text = data.lightboxSend2;
  } );
}

/*****************
 * Lightbox Code *
 *****************/

import wixWindow from 'wix-window';

$w.onReady( function () {
  let received = wixWindow.lightbox.getContext();
  $w('#lightBoxReceive1').text = received.pageSend1;
  $w('#lightBoxReceive2').text = received.pageSend2;
} );

export function closeButton_click(event) {
  wixWindow.lightbox.close( {
    "lightBoxSend1": $w('#lightBoxSend1').value,
    "lightBoxSend2": $w('#lightBoxSend2').value
  } );
}

getContext( )

Returns the data object that was passed to a lightbox.

Description

The getContext() function returns the data object passed when the lightbox was opened using the openLightbox() function, if any data was passed. If the lightbox was opened another way, getContext() returns undefined.

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.

Syntax

function getContext(): Object
RETURN VALUE
?
Value that a function evaluates to when it is finished running.
Object
The data object that was passed to the lightbox.

Examples

Get the data that was passed to the lightbox

import wixWindow from 'wix-window';

// ...

let receivedData = wixWindow.lightbox.getContext();

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:

  • An 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.
/*************
 * Page Code *
 *************/

import wixWindow from 'wix-window';

export function openButton_click(event) {
  wixWindow.openLightbox("MyLightBox", {
    "pageSend1": $w('#pageSend1').value,
    "pageSend2": $w('#pageSend2').value
  })
  .then( (data) => {
    $w('#pageReceive1').text = data.lightboxSend1;
    $w('#pageReceive2').text = data.lightboxSend2;
  } );
}

/*****************
 * Lightbox Code *
 *****************/

import wixWindow from 'wix-window';

$w.onReady( function () {
  let received = wixWindow.lightbox.getContext();
  $w('#lightBoxReceive1').text = received.pageSend1;
  $w('#lightBoxReceive2').text = received.pageSend2;
} );

export function closeButton_click(event) {
  wixWindow.lightbox.close( {
    "lightBoxSend1": $w('#lightBoxSend1').value,
    "lightBoxSend2": $w('#lightBoxSend2').value
  } );
}