How to trigger an Onclick popup via CSS class

If you need to add an Onclick popup on any page/post on your site, you can do that via our CSS class: sg-popup-id-1 (your popup id number)

  • Simply go to the page you want to insert the popup
  • Switch to the Text tab

  • Paste the following CSS class (sg-popup-id-1) inside your HTML elements

Ex. <span class=”sg-popup-id-1”>Click text</span>

*Type your popup id number in the class

Then, from your popup list select the popup you would like to show when your visitors press the click text. Then, start editing the popup. In the “Popup Display Rules” section you can choose the “Selected posts” option and select the post where you have pasted the CSS class.

Then, you need to select the “Set by CSS class” event in the “Popup Events” section.

Very often users have page builder plugins in their sites and in this case the CSS class adding differs a little.

Suppose you want to add an Onclick popup on a Button element.

In this case, you should go to your Button module settings, find Custom CSS option and enter our CSS class (sg-popup-id-1, 1 is your popup id number) there.

Example with Divi Builder:

Example with Visual Composer

Here you can see the result of the Onclick popup added via CSS class.

Check the following knowledge base article if you wish to add a popup "On page load": Show Popup Automatically