1. Home
  2. Knowledge Base
  3. Divi Areas Pro
  4. Snippets
  5. Dynamically change the content of a Popup

Dynamically change the content of a Popup

It’s possible to dynamically adjust the content of a Popup before opening it. This technique requires coding skills, as you need to write a few lines of JS code.

If you want to set the contents of a Popup dynamically, you have a few options – the two most common ones are:

  1. Design the Popup in Divi Areas Pro, and then use JS code to modify the contents of that existing Popup. Or
  2. Dynamically create a Popup directly in JS.

Skip the explanation and see the code: Here’s the gist with the two snippets → https://gist.github.com/divimode-philipp/630970f9d94d5dc030b2741dbeee2e6b

1. Modify existing Popup

This approach gives you more flexibility in design – you can use the Visual Builder and all Divi Area settings to design the Popup. In the end, you can use JS to adjust some details before triggering the Popup.

As it’s a “full” Divi Area, this approach will also support all features of Divi Areas Pro, such as usage tracking.

Sample snippet:

2. Create a dynamic Popup

You can create the entire Popup from JavaScript, without any preparations. This is an advanced use-case, as you can generate Popups only when needed, and gives you full control over the entire Popup content. However, it’s a little more “techie” and you possibly need custom CSS to style the Popup contents.

Sample snippet:

Was this article helpful?

Related Articles

Need Support?

Can't find the answer you're looking for?
Contact Support