Popup Pro - open popup on button click

Is it possible to open a specific popup by attaching a click event on a button on the page?

  • Michael Bissett

    Hey @William Gallo, glad you asked! :slight_smile:

    If that button of yours has a CSS ID attached to it, we can definitely target it. You'll want to make sure that the "JavaScript Events" add-on is enabled inside of:

    PopUp -> Settings

    Then, as you're setting up your popup, inside the "Behavior" meta box, you'll want to make sure to set "When to show the PopUp:" to "Appear when user clicks on a CSS selector", and enter the CSS ID for your button (see screenshot below).

    You can also choose to check the box for "Repeated" as well, if you're wanting this popup to show up more than once (i.e. it doesn't stop showing up after the user closes the popup, and tries to click the button again).

    Hope this helps! :slight_smile:

    Kind Regards,

  • Cameron

    Hi All,
    Thanks for both the question and the detailed response.
    I am attempting to load this pop-up from my website, but cannot seem to get the button to work.
    You can see it here
    The button is created through a widget interface, and doesn't appear without a link attribute in the field. So if I use a real link, obviously the button directs to there, and if I use '#' it doesn't trigger an action.
    Any recommendations on what I need to do differently would be greatly appreciated.

    • Tammie

      Hi Cameron,
      I realize you posted this question quite a while ago. I stumbled across it when I was looking for a similar solution and struggling along to come up with a way to use the Popup with a button.

      First - when setting up the popup, make sure you specify the attribute with the . or the #. I used this:


      Next, be sure to set up your CSS item to correspond and you can add in whatever elements you want. I chose to do this:

      .cancel {
        font-weight: 600;
        cursor: pointer;
        cursor: hand;

      Then lastly - the button (or in my case, link). Are you able to assign a class in your widget interface? This is what my code looked like, but if you are using a specific button widget then you would need to be able to add a class to it.

      <a href="#" class="cancel">Cancellation Terms</a>

      Hopefully this will help anyone looking for a solution to this question.