Pro 5.0.7 - modals / mega menus etc

[urchindesign]

In all instances of modals and mega menus it is often required to create a separate close button. By example your modal has a close button in the top corner of the screen which users often miss so we create a button inside the modal that we use to close the modal.

At the moment the only way I have managed to do this is to create a button with a custom attribute to target the modal by it is theme value -“e13-68” .

data-x-toggleable=“e13-68”

The problem with this approach is that when you add other elements to the page then the “e13-68” changes to a different value.

Is there another way to target to the modal so that we can close it with a custom button?

[tristup]

Hi @urchindesign,

Thanks for reaching out.
The data-toggle attribute value you are using has been generated based on the page ID and number of the element. So if you add any new element before that specific element, the number will be changed dynamically while rendering the page.
I would suggest you add a class to the custom Close button and add the following custom JavaScript code into the Page JS to trigger the x-modal-close button.

jQuery('.customclose').on('click', function() 
{
    jQuery('.x-modal-close').trigger('click');
    return false;
});

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

[urchindesign]

Thanks.

I was hoping there would be a native way to do this as in the past custom JS has caused issues with theme upgrades for similar types of things.

[tristup]

Hi @urchindesign,

Regretfully, there is no other native way to implement it.

Thanks