Example Description
A lightbox is a popup overlay that appears on top of a page while dimming the page in the background. Visitors cannot interact with other content on the website while the lightbox is open. 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.
How We Built It
Home Page Elements
On the HOME page we added 2 radio button groups and a button for selecting data and opening the lightbox.
Page Code
On the HOME page we used code to create an event handler that runs when the button on the page is clicked. The event handler reads the selections made on the page, opens the Greeting Lightbox, and sends it the selection information.
Lightbox Elements
In the Greeting Lightbox we added 2 text elements to display the data sent to the lightbox from the page, and some buttons to close the lightbox and send some information back to the page.
Lightbox Code
In the Greeting Lightbox we used code to read the information sent from the page and populate it into 2 text elements. We also created an event handler for the lightbox's buttons that closes the lightbox and sends some information back to the page.
Related Examples
Did this help?
|
Thanks for your feedback!
Add to Cart Gallery
Let customers to add products to their cart
INTERMEDIATE
Hide and Show Elements
Hide and show elements in response to user interactions
BEGGINER
Hide and Show Elements
Hide and show elements in response to user interactions
BEGGINER