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!

#infoField1

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".

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.