Make button trigger modal, but only upon click (not at pageload)

[nblund]

I would like to use a button to trigger a modal, because the button allows different styling options than the modal toggle itself. I can not use togglehash because that will fire the modal upon pageload. I have tried to apply a class, but that didn’t do the trick. I didn’t find a solution with the other threads - perhaps because the solution is too simple? Please advise. Thanks.

[tristup]

Hi @nblund,

Thanks for reaching out.
You can use the Toggle Hash attribute into the Button URL to be executed on click. I have created a test page and add a Modal with the Toggle Hash value test. And then added that value to the URL of the Button element as shown in the screenshot.

Hope it helps.
Thanks

[nblund]

Thanks. I see that it works on the page. However, placing a button in the footer with that same #test value in the URL as in your button makes your test modal fire on pageload as well…

[tristup]

Hi @nblund,

If you refresh the page, it will take the current URL where the #test is added due to the button click. Alternatively, you can modify the Toggle Button as a Button by following the below steps.

1. Enable the Text option and disable the Graphics option in the Toggle > Setup.

2. Add the Text into the Toggle > Text > Primary option.

Hope it helps.
Thanks

[nblund]

Hi there. As you know, I would like to use a button to trigger a modal, because the button allows different styling options than the modal toggle itself (such as adding animated graphics in combination with text in the toggle).

I am not sure I understand your comment: “If you refresh the page, it will take the current URL where the #test is added due to the button click.” I am aware of the fact that the modal is triggered - this is the very reason for my ticket.

But whereas the modal is triggered upon button click, if the button is placed like yours on the test page - the modal is triggered upon pageload when the button is placed in the footer (as I would like to do).

Did you see that?

[tristup]

Hi @nblund,

You can 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 Modal.

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

Please remember that the above code will work if copied as it is and doesn’t conflict with any existing style.
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 really do not provide support for custom codes that means we can’t fix it in case it conflicts with something on your site nor will we enhance it.

Thanks

[nblund]

Thanks so much. I wasn’t aware of that this would require customisation. The Pro theme is fantastic, but your support totally rocks.

[ruenel]

You are most welcome, @nblund.