top of page

Trigger Dynamic Lightbox Popup

Learn how to create a triggered lightbox featuring dynamic text which populates the lightbox using Corvid (a.k.a. Wix Code).

This example shows you how to create a single triggered lightbox which can be reused with different text depending on the users interaction on your website. The 'More info' text is actually a link which triggers the lightbox to popup with additional information about the input field in question. Try it for yourself: click the 'More info' text to trigger each lightbox. The input fields are just for illustration and don't do anything in this example.

Try it!
More info
More info

Add onClick event listeners to the #infoField1 and #infoField2 text elements. When clicked, they will pass an objected called dataObj containing a variable called textValue which holds the string/message to be displayed on the lightbox. This is done on the page code where the triggering item resides, i.e. #infoField1 and #infoField2 in this case. The wixWindow.openLightbox function passes the textValue to the lightbox, which has a page name of "Info" (the function does not reference the alias of the lightbox).

Next, add a new lightbox page, and add the lightbox page code found below to receive the textValue from the dataObj and display it on a text element called #txtDynamicMessage within the lightbox. The page name of the lightbox in this example is named "Info".

Page Code



Lightbox Page Code

Please wait ...
Disclaimer: To the best of our knowledge, this code works for its stipulated purpose. If you find an error in our code, or know of a better way to achieve the same result - please contact us! All our code snippets come with full support to help you implement them on your own website - simply contact us for help.
bottom of page