Hello Lightboxes

Send data between the main page and a lightbox.

Introduction Last updated: 25 Mar 2025

Open Example Preview

About

In this example, we open and close a lightbox using code, and send data between the main page and the lightbox.

APIs

• wix-window-frontend

How we built it

We added the following to our site:

Page Elements

Home

• 2 radio button groups with options for the user to select a greeting and a subject to appear in the lightbox.
• A button to open the lightbox.
• A text element to display the data sent by the lightbox to the page.

Greeting Lightbox

• 2 text elements to display the greeting and subject sent to the lightbox from the main page.
• 3 buttons to close the lightbox, with each one sending a different message to the main page.

Frontend Code

Home

The code in this file enables you to send data to the lightbox and display data returned by the lightbox.

In this file, we create an event handler that is triggered when the button to open the lightbox is triggered. In this event handler, we:

1. Open the lightbox and send it the selected greeting and subject. On the same line, we save the lightbox's response.

2. Display the lightbox's response.

Greeting Lightbox

The code in this file displays the data sent from the main page to the lightbox, and enables you to send data back to the main page when closing the lightbox.

In this file, we:

1. Retrieve the data sent from the main page.
2. Apply an event handler to the 3 buttons that:

• Closes the lightbox.
• Sends data to the main page.

Code Snippets

import { window } from "@wix/site-window";

$w.onReady(() => {
  $w("#openLightboxButton").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();
  });
});

Get Help

Join the community

Join the Wix Studio community on Discord, where experienced developers and fellow creators come together to share tips, troubleshoot issues, and collaborate.

Hire a developer

Building a coded solution on your own can be challenging. Let an experienced Wix developer build it for you, so you can keep working on your site or business. Visit the Wix Marketplace to find a trusted developer.