How do I make a dual button where button 1 triggers modal popup

[duncmoran]

Hi, I want to have button 1 of a dual button trigger a content area modal. Could you please provide some advise on how do I might achieve this?

Thank you

[ruenel]

Hello @duncmoran,

Thanks for writing in! I have checked your page and I can see that you are using the Ultimate Addon Cornerstone plugin. This is a 3rd party plugin, therefore, you will have to contact the creators of this plugin to be able to make it work. Meanwhile, if you want to trigger the content modal element popup, just make sure to add a Toggle Hash properly and use it as your link URL. For example, your hash is my-modal, in your button URL, you can insert #my-modal as your link URL.

• https://theme.co/docs/content-area-modal#customize

Hope this helps.

[duncmoran]

Hi could you please explain the toggle-hash in more depth, I believe this will solve my issue but can’t get it to work. I can apply the toggle hash to the modal, and I can apply the toggle has as my href in the button however it doesn’t trigger the modal to open. When clicked, it passes the information along to the TLD as a subdirectory (like an anchor link would) but no action takes place.

Can you please provide a more detailed overview of how to use any button (not the toggle) to trigger a modal when clicked.

Thank you

[tristup]

Hi @duncmoran,

Toggle Hash is an option to add a custom hash to the toggle section of the Content Area element. Whatever you add here will be added as the value of data-x-toggle-hash HTML attribute. You can use this as a base point for your Javascript custom code.
As explained, you can use the data-toggle-hash attribute to locate the selector while triggering inside any custom JavaScript code.
The Toggle Hash is still not a good option for now as it can only activate the modal once, you can get more info here: Toggling a Content Area Modal from another button
You can also use the following code to trigger the modal on the button click. Here open-modal-button is the class assigned to the button and the assigned id of the modal my-content-area-1.
Remember that, the anchor-toggle suffix will be added to the given id of Content Modal Area

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

You can get more help on this thread: Content Area Modal open on click

Remember that the suggestion in the above-mentioned thread and the custom code will work if copied as it is and doesn’t conflict with any existing code.
Please note that the code provided serves only as a guide to help you get started custom coding on your own if there’s no option offered in our theme or the products we bundle.
We do not provide support for custom codes that means we can’t fix it in case it conflicts with something in your site nor will we enhance it.

Thanks