Popup Pro does not seem to have the option to activate on click, but the documentation says it does

Please advise how to activate Pop up on click to CSS element. Documentation says it can be done, but it's not in the plugin settings.

  • Michael Bissett

    Hey @Dave Steer, hope you're doing well this evening! :slight_smile:

    The usage docs for PopUp Pro are in need of an update, I'll admit, but I'd be more than glad to explain how you can enable this in the meantime.

    First, you'll need to go to PopUp -> Settings, and enable the "JavaScript Events" condition (see screenshot #1).

    Once you've done that, you'll see that two options have been added to the "When to show the PopUp:" section: "Appear when the mouse leaves the browser window" & "Appear when user clicks on a CSS selector" (see screenshot #2).

    Just specify the CSS element that you're looking to target in the "Appear when user clicks on a CSS selector" section, activate & save your popup, and you should be all good to go here! :slight_smile:

    Hope this helps!

    Kind Regards,
    Michael

  • Dave Steer

    OK, that worked, thanks.

    One follow-up question: I wanted to embed an iframe inside the popup (basically a Constant Contact Signup Form). If I don't enter any sizes, I end up with a 300x150 scrolling iframe in the popup. In order to get it to show properly, I have to specify the frame size (both in the iframe code and the popup settings), but then I lose responsiveness. Do you have any best practices for showing a frame at 100% width of the popup box?

  • Ash

    Hello @Dave Steer

    What's about if you use 100% as iframe width with a specific height? Use like this:

    <iframe src="http://google.com" width="100%" height="200"></iframe>

    Then add the following in your css:

    .wdpu-text{
    display: block !important;
    }

    You can add this to a theme's stylesheet, in a child theme, or using a plugin like My Custom CSS.

    Hope it helps :slight_smile: Please feel free to ask more question if you have.

    Cheers
    Ash

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.