Triggering off-page content modals from links

[cathaloregan]

Hi, how do I build on the code suggested here: https://theme.co/apex/forum/t/content-area-modal-open-on-click/60535/6 to trigger a second modal on the same page, say with id=my-content-area-2?
Thanks,

jQuery( function($){

$('.open-modal-button').on( 'click', function(e){
    e.preventDefault();
	$('a.e146-3.x-anchor.x-anchor-toggle').trigger('click touchend touchstart');
});

});
jQuery( function($){

$('.open-modal-button').on( 'click', function(e){
    e.preventDefault();
    $('#my-content-area-1-anchor-toggle')[0].click();
});

});

[friech]

Hi Cathal,

Thank you for writing in, you don’t need the custom JS code. You could place multiple Content Area Modal element in the same page.

Elements - Content Area Modal

Hope it helps,
Cheers!

[cathaloregan]

Thanks. But rather than using the toggle to trigger the modal, I am trying to use text links (within a body of text) and menu links as the triggers (while hiding the multiple toggle icons). Hence the script, but it seems to be suitable only for triggering a single modal on the page. Any guidance welcome! Thanks
Cathal

[ruenel]

Hello Cathal,

Thanks for writing in!

If you are going to use text or menu items, your text must have a class or ID so that you can make use of a JS code to trigger the modal. For example, your text link would be:

<a class="open-modal-button" href="#">Launch Modal</a>

And then your JS code would be:

$('.open-modal-button').on( 'click touchstart', function(e){
    e.preventDefault();
	$('a.e146-3.x-anchor.x-anchor-toggle').trigger('click touchend touchstart');
});

For menu items, all you need is to find the menu ID or menu class and use this JS code:

$('.menu-item-1234').on( 'click', function(e){
    e.preventDefault();
	$('a.e146-3.x-anchor.x-anchor-toggle').trigger('click touchend touchstart');
});

To find the menu item class or ID, please check this out:

• https://wpexplorer-themes.com/total/docs/find-menu-id-wordpress/

Hope this helps.