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
getContext Parameters
This function does not take any parameters.
Returns
The data object that was passed to the lightbox.
Return Type:
Was this helpful?
1import wixWindowFrontend from 'wix-window-frontend';23// ...45let receivedData = wixWindowFrontend.lightbox.getContext();
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.
1/******************2 * Home Page Code *3 ******************/45import { openLightbox } from 'wix-window-frontend';67$w.onReady(() => {8 $w('#openButton').onClick(async () => {9 const dataToSend = {10 greeting: $w('#greeting').value,11 subject: $w('#subject').value12 };1314 const lightBoxResponse = await openLightbox('Greeting Lightbox', dataToSend);15 $w('#returnedMessage').text = `YOU CHOSE: ${lightBoxResponse}`;16 $w('#returnedMessage').show();17 });18});1920/*****************21 * Lightbox Code *22 *****************/2324import { lightbox } from 'wix-window-frontend';2526$w.onReady(function () {27 let receivedData = lightbox.getContext();2829 $w('#greeting').text = receivedData.greeting.toUpperCase();30 $w('#subject').text = receivedData.subject.toUpperCase();3132 $w('#blueButton').onClick(clickHandler);33 $w('#greenButton').onClick(clickHandler);34 $w('#pinkButton').onClick(clickHandler);35});3637function clickHandler(event) {38 lightbox.close(event.target.label);39}4041
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.
1/*************2 * Page Code *3 *************/45import wixWindowFrontend from 'wix-window-frontend';67export function openButton_click(event) {8 wixWindowFrontend.openLightbox("MyLightBox", {9 "pageSend1": $w('#pageSend1').value,10 "pageSend2": $w('#pageSend2').value11 })12 .then( (data) => {13 $w('#pageReceive1').text = data.lightBoxSend1;14 $w('#pageReceive2').text = data.lightBoxSend2;15 } );16}1718/*****************19 * Lightbox Code *20 *****************/2122import wixWindowFrontend from 'wix-window-frontend';2324$w.onReady( function () {25 let received = wixWindowFrontend.lightbox.getContext();26 $w('#lightBoxReceive1').text = received.pageSend1;27 $w('#lightBoxReceive2').text = received.pageSend2;28} );2930export function closeButton_click(event) {31 wixWindowFrontend.lightbox.close( {32 "lightBoxSend1": $w('#lightBoxSend1').value,33 "lightBoxSend2": $w('#lightBoxSend2').value34 } );35}36