Trigger: Click Open -- Use jQuery to Trigger a Popup 'On Click'

This is the fifth of 5 articles that describe Click Open trigger-setting methods. 

By default, WordPress automatically strips out JavaScript when it's added to the Editor. 

Add the following WordPress filter to run jQuery/JavaScript directly in the Popup Editor. You can add the PHP code snippet to your child theme's  functions.php file or with a third-party plugin such as My Custom Functions. 

<?php

// Copy everything below this line //
add_filter( 'kses_allowed_protocols', 'my_allowed_protocols' );
/**
 *  Description
 *
 *  @since 1.0.0
 *
 *  @param $protocols
 *
 *  @return array
 */
function my_allowed_protocols ( $protocols ) {
	$protocols[] = "javascript";
	return $protocols;
}

View the source on GitHub.

Here are 3 different approaches to call a popup in the Editor using JavaScript/jQuery. 

Method #1: Use the global function 'PUM.open()' as described in the Popup Maker jQuery API.

// The parameter '123' refers to a generic popup ID.
// Substitute the actual ID number generated for your popup.
<a href="javascript:PUM.open(123);">Sign Up For Our Newsletter!</a>

View the source on GitHub.

Method #2: Use the 'PUM.open()' function assigned to an 'onclick' link attribute. 

// The parameter '123' refers to a generic popup ID.
// Substitute the actual ID number generated for your popup.
<a href="#" onclick="PUM.open(123);">Sign Up For Our Newsletter!</a>

View the source on GitHub.

Method #3: Target one or more CSS selectors with jQuery to open a specific popup with the .on( 'click' ) method. 

<button id="my-button">Click Me</button>
// Replace the CSS selector '#my-button' with the selector(s) to be targeted by
//    the .on( 'click' ) method.
// The parameter '123' in the .open() method refers to a generic popup ID number.
// Substitute the actual ID number generated for your popup.
<script type="type/javascript">jQuery('#my-button').on('click', function () {
    PUM.open(123);
    });
</script>

View the source on GitHub.