Need to add an alternative hyperlink target for Icons and other objects

Beaver Builder
1

I’m trying to get some pop-up lightboxes to work with site content and forms. This is so I can use multiple interactions on a long-form page without leaving the page (e.g pop-up form submissions etc.)

Most plugins e.g. Foobox require some customisation of the tag - in this case I want target=“foobox” to call the plugin at the right time.

Can you advise where to find and edit the theme/child theme to add this targt option to the editor dropdown?

Any recommendations of another plugin or approach will also be appreciated.

Cheers, Paul

2

Hey Paul,

Can you tell me what specific elements you are trying to edit? It won’t be possible to edit the module markup, but maybe we can come up with a JavaScript solution for adding what you need. Let me know.

Thanks,
Justin

3

Ah, OK, check out http://briantracyglobal.com/home-global

You will see some Call to action buttons and Icons linked to Sales training etc… I want to program some popup windows with forms to react to a click.

4

So the element needs to have target=foobox or we need to be able to add some JavaScript to it.

5

Hey Paul,

Since you can’t change the markup directly, you will need to set an ID on each module you want to work with using the ID setting in the advanced tab. Once you’ve done that, you can target it with JavaScript like this…

(function( $ ) {
  	$( function() {
		
		    $( '#my-id-1' ).on( 'click', function( e ) {
			        // Your code here... 
    		});
		
    		$( '#my-id-2' ).on( 'click', function( e ) {
			        // Your code here... 
    		});
		
  	});
})( jQuery );
6

OK mate, my days of coding are over. I’ll have to go to a 3rd party tool.

Thanks for this

7

Hey Paul,

Sounds good. Let me know if any other questions come up.

Justin