Trigger: Click Open

Description

The popup triggers when a user clicks on an element you’ve assigned to open a popup.

Click Open is a type of trigger, for more information on triggers, visit our documentation on triggers.

Uses

You can target literally any element on your website to open a popup when that element is clicked by the user. The possibilities are endless.

Create the Trigger in the WordPress Admin

From the Popup Editor, scroll down to the Triggers Pane and click the "Select a trigger type" drop down menu:

You will be presented with the settings for Click Open:

Extra CSS Selector Field

The Extra CSS Selector Field is Method #2 of five that is available to use for triggering your popup on click. Read more about Method #2 below.

Presets for Extra CSS Selector Field

Click the drop down caret in the Extra CSS Selector Field to display the presets:

Pick and choose which Presets to best suit your needs:

  • Link: Exact Match - Turns any link that exactly matches the link you input here into a Click Trigger that will trigger the popup you add this preset to.
  • Link: Containing - Turns any link that contains the text you input here into a Click Trigger that will trigger the popup you add this preset to.
  • Link: Begins With - Turns any link that begins with the text you input here into a Click Trigger that will trigger the popup you add this preset to.
  • Link: Ends With - Turns any link that ends with the text you input here into a Click Trigger that will trigger the popup you add this preset to.

Default Click Functionality

You may want to disable the default click functionality if you want your element to do two things at once, like a download a file and trigger a popup at the same time.

Once you’re done, click Add.

Triggering the Popup on the Front End

Now that your popup has been created, we can use a number of different methods to trigger the popup on click.

Which method you use will depend on your website setup. This is because of the huge variety of themes and plugins, and they don't all provide a simple way to modify elements of a page easily.

The method chosen may be different for each element that you wish to target depending on how that element is created. Below is an outline of each method and how it can be used.

Method #1: Using the popmake-# and popmake-slug classes

From the ‘All Popups’ menu, look for the ‘CSS Classes’ of the relevant popup.

popmake_classes.jpg

Add the appropriate popmake-# class to any element. Every popup created using the editor has a unique ID and a slug. Both can be used to call a popup. For instance:

  • A popup with ID of 13 and a name of “Newsletter Opt-In Offer” could be opened by any element with the class popmake-13 or popmake-newsletter-opt-in-offer

In this situation, I want the user to click on text that says: “Sign Up for Our Newsletter”

My code would look like this:

If your theme has styles set up for a button class, you can easily use this, this time we’ll use the slug as the selector:

These are just two examples, but you can implement on click popups on virtually every element possible using the popmake classes and slugs.

Method #2: Extra Selectors

The Extra CSS Selector Field has a number a different uses, but is great when you cannot modify the element you want to trigger a popup. For example, header and footer elements, or widgets, where you cannot control the content or modify the code.

It's also wonderful for mass targeting different elements throughout your website because you can pass any valid CSS selector to our click triggers and all targeted elements will become click triggers.

Read more about CSS Selectors  here.

Any valid CSS selectors or Presets will be targeted and will become a click trigger for your popup. The CSS selector field is also good for managing your popups efficiently or increasing accessibility. For example:

  • If you wanted every red button on your site to trigger a popup, you would use an extra selector like “.button.red-button”
  • If you wanted a menu item to trigger a popup, it may be “#main-menu ul li.menu-item-37” which would trigger on the menu item with ID of 37. Especially handy if you want your popup to trigger on a menu item click, but you can’t edit the menu.

Presets for Extra CSS Selector Field (v1.5 BETA)

Get the BETA Here

Click the drop down caret in the Extra CSS Selector Field to display the available presets:

Pick and choose the Presets that best suits your needs:

  • Link: Exact Match - Turns any link that exactly matches the link you input here into a Click Trigger that will trigger the popup you add this preset to.
  • Link: Containing - Turns any link that contains the text you input here into a Click Trigger that will trigger the popup you add this preset to.
  • Link: Begins With - Turns any link that begins with the text you input here into a Click Trigger that will trigger the popup you add this preset to.
  • Link: Ends With - Turns any link that ends with the text you input here into a Click Trigger that will trigger the popup you add this preset to.

Getting Your Own CSS Selectors

You can use this extension for Google Chrome and/or Presets to make getting CSS selectors a snap - or read this guide to learn how to get your own selectors. After grabbing the CSS selector code from the front-end of your website, simply paste that into the extra selectors field in the popup editor.

Method #3: Using a Simple Link

Use the Popup ID with <a href>

Important: While the easiest method to trigger a popup, some themes target all "#" type links. These themes then take over the click event for our link. This means the popup will not trigger. If you're a user of one of these types of themes, then this method will not work for you.

Note: use #popmake-123 anywhere that you can put a link throughout your site. This is great for  opening a popup when a user clicks a WP nav menu item.

Our link is simply:

The 123 at the end represents your popup ID number (found on 'All Popups' page in WP Admin). Use this simple link anywhere to trigger your popup.

That element will now trigger a popup on click!

Method #4: Using <a href> with jQuery

Use this filter in your site so that these method snippets will work properly:

Now these simple pieces of code will work wherever we need them:

You can also you use this:

Method #5: Writing Your Own jQuery Plug-In

Our last option is used when standard methods are not working due to existing JavaScript on those elements, or in the cases of some custom implementations. Here’s the code you’ll need to complete your plug-in:

Related Articles

For more info on using custom javascript and Popup Maker, check out our Getting Started with Custom Javascript Guide and the jQuery Plug-In API Doc.

Need help with your navigation menu and popups? Learn  How to Open a Popup From a WordPress Nav Menu.

Still need help? Contact Us Contact Us