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
close Parameters
NAME
TYPE
DESCRIPTION
Returns
This function does not return anything.
Return Type:
Was this helpful?
1import wixWindowFrontend from 'wix-window-frontend';23// ...45wixWindowFrontend.lightbox.close();
1import wixWindowFrontend from 'wix-window-frontend';23// ...45wixWindowFrontend.lightbox.close(dataObj);
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