> Portal Navigation: > > - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version. > - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages). > - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`). > - Top-level index of all portals: https://dev.wix.com/docs/llms.txt > - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt # Method name: siteWindow.openLightbox(name: string, data: object) # Method Link: https://dev.wix.com/docs/sdk/frontend-modules/window/open-lightbox.md # Method Description: Opens a popup and optionally passes it the specified data. > **Note:** The terms popup and lightbox refer to the same element. While the editor and dashboard now refer to it as a [popup](https://support.wix.com/en/article/studio-editor-using-popups), the API methods continue to use the term lightbox for backward compatibility. The documentation uses both terms accordingly. The `openLightbox()` method opens a popup and allows you to pass data to it. Popups that are opened automatically on page load, or with a link from a page element don't receive passed data. To ensure data can be passed: 1. Call this method to open a popup programmatically. For example, add a button with an `onClick` event that calls `openLightbox()`. 2. Set **Automatically display popup on pages** to **No** in the popup's settings under [**Set Triggers**](https://support.wix.com/en/article/studio-editor-using-lightboxes#setting-triggers-for-a-lightbox). If you pass data to a popup, call `getContext()` in the popup's code to access the received data. > **Notes:** > + Use the name of the popup and not the popup's ID when calling `openLightbox()`. You can find the popup's name by selecting the popup and clicking the settings button. > + Only call `openLightBox()` after the `onReady()` method, once all page elements have finished loading. # Method Permissions: # Method Permissions Scopes IDs: undefined # Method Code Examples: ## Open a popup ```javascript import { window } from '@wix/site-window'; // ... await window.openLightbox("LightboxName"); ``` ## Open a popup and send it data ```javascript import { window } from '@wix/site-window'; // ... await window.openLightbox("LightboxName", dataObj); ``` ## Open a popup and receive data when it is closed ```javascript import { window } from '@wix/site-window'; // ... window.openLightbox("LightboxName") .then( (data) => { let receivedData = data; } ); ``` ## Open a popup, send it data, and receive data back when it is closed ```javascript import { window } from '@wix/site-window'; // ... window.openLightbox("LightboxName", dataObj) .then( (data) => { let receivedData = data; } ); ``` ## Open and close a popup, and send information between the popup and the page ```javascript /****************** * Home Page Code * ******************/ import { window } from "@wix/site-window"; $w.onReady(() => { $w('#openButton').onClick(async () => { const dataToSend = { greeting: $w('#greeting').value, subject: $w('#subject').value }; const lightBoxResponse = await window.openLightbox('Greeting Lightbox', dataToSend); $w('#returnedMessage').text = `YOU CHOSE: ${lightBoxResponse}`; $w('#returnedMessage').show(); }); }); /***************** * Lightbox Code * *****************/ import { lightbox } from '@wix/site-window'; $w.onReady(async function () { let receivedData = await lightbox.getContext(); $w('#greeting').text = receivedData.greeting.toUpperCase(); $w('#subject').text = receivedData.subject.toUpperCase(); $w('#blueButton').onClick(clickHandler); $w('#greenButton').onClick(clickHandler); $w('#pinkButton').onClick(clickHandler); }); async function clickHandler(event) { await lightbox.close(event.target.label); } ``` ## A scenario where information is passed between a page and a popup ```javascript /************* * Page Code * *************/ import { window } from '@wix/site-window'; $w('#myOpenButton').onClick(async (event) => { await window.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 { lightbox } from '@wix/site-window'; $w.onReady(async function () { let received = await lightbox.getContext(); $w('#lightBoxReceive1').text = received.pageSend1; $w('#lightBoxReceive2').text = received.pageSend2; } ); $w('#myCloseButton').onClick(async (event) => { await lightbox.close( { "lightBoxSend1": $w('#lightBoxSend1').value, "lightBoxSend2": $w('#lightBoxSend2').value } ); }); ```