Button and modal

[barkmall]

can i add buttons that will open modals?

[tristup]

Hi @barkmall,

Thanks for reaching out.
I would suggest you go through the following thread which may help you to achieve what you are trying to.

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

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 g…

Content area model trigger script in header and revolution slider

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

Content Area Modal open on click

Hi @XSO, Ah, thanks for the clarification, the javascript code you need is this jQuery( function($){ $('.open-modal-button').on( 'click', function(e){ e.preventDefault(); $('a.e146-3.x-anchor.x-anchor-toggle').trigger('click touchend touchstart'); }); }); You also have missing s from your link code <a clas="open-modal-button" href="#">Contact Us ● </a> Please change it to this <a class="open-modal-button" href="#">Contact Us ● </a> Hope this helps.

Hope it helps.
Thanks

[barkmall]

not sure what’s wrong, can you help to take a look?

script -
jQuery(document).ready(function($){
$(’#lang-pop-up-btn’).click(function(){
console.log(‘1’);
$(’#lang-pop-up-anchor-toggle’).click();
console.log(‘2’);
});
});

no popup and can see log (https://staging-sellonbarkmall.kinsta.cloud/#)

[tristup]

Hi @barkmall,

There is nothing wrong with your code, but it depends on what you are trying to do here. I would suggest you go through the reference thread once and modify the code accordingly.

While intercepting any events on the a tag, you need to prevent the default action of that using the preventDefault function by using the following code.

jQuery('#lang-pop-up-btn').click( function(e)
{
    e.preventDefault();
});

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

[barkmall]

thanks for the reply. I have added the prevent function now.

I can see that actually my code do trigger the click event, but somehow the popup just doesn’t show up. I can even see the hamburger icon -> ‘X’ transformation animation. Do you have any idea?

[friech]

Hi Mei,

Actually, you don’t need the custom script, please remove it to avoid conflict. There is a Toggle Hash option on the Modal element, which you can use to deeplink or bind the Modal with a Button element.

So if your Toggle Hash is modalhash, then your button URL should be #modalhash

Hope it helps,
Cheers!