Content area model trigger script in header and revolution slider

[eyedia]

I have to change out buttons to link to our scheduling platform. I have used the content area model to trigger the script withing the page content,

I am having trouble trying to figure out how to do the same in the header as well as the button i have in revolution slider. I am using xtheme so i don’t have the header control like i do in pro (for header i have custom html code set in the area of theme settings for header)

Any ideas on how i can accomplish this?

You can see the current in page button working at the bottom of the page CTA area that says “get started” http://www.reformbodyclinic.ca/

[ruenel]

Hello @eyedia,

Thanks for writing in! To accomplish what you have in mind, kindly check out these old threads:

• Trigger content area modal from Slider Revolution
• Triggering off-page content modals from links
• CSS/JS needed to make Content Area Modal element open on hover?
• Pro Theme - Trigger a Modal using javascript

Note: We no longer provide support for customizations under our Support Policy. If you are unfamiliar with code and resolving potential conflicts, you may select our One or Care service for further assistance.

Best Regards.

[eyedia]

Hi @ruenel,
I tried what was suggested here: Triggering off-page content modals from links
I already have on each page a “Content area modal” that is working with my code to pop up the embed code.

The article you sent i believe only works for the offcanvas element though. Using the example, the link does nothing and just returns the url with /#

Is there a way where i can link a button or link text to pop up the current model?

Thank you

[prakash_s]

Hi @eyedia,

To show the modal clicking on a text add this code in a Text element

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

Or for a button add this class name open-modal-button to that Button element.

Now add this js code in Theme option’s -> JS

$('.open-modal-button').on( 'click touchstart', function(e){
    e.preventDefault();
	$('a#BOOKING-MODAL-anchor-toggle').click();
});

Please note that the code provided above serves as a guide only and is to help you in getting started so implementing it and maintaining the code will be out of our support scope and for further maintenance for new possible versions of the theme that may cause the customization to break, you will need to hire a developer.

Hope it helps.
Thanks