Add a custom close button to content modal area

[Lyser]

Hello,
I’ve added a close button to content modal area under the text, i would like to know how could it be possible for this button to close the area ?

[lely]

Hi @Lyser,

I can see your setup. Unfortunately, there is no available settings for this special button to close the modal.

There is a workaround, while that is outside the scope of support, I could point you in the right direction with the understanding that it would ultimately be your responsibility to take it from here.

See the jQuery .on(click) event and .trigger() event, thats almost plain English *( on button click , trigger modal close).

Hope this helps.

[Lyser]

Thx Lely,
It’s not in english but chinese for me =)
Too bad, thx for help anyway and if someone in the forum could show how this could be done, well it would be really apreciated.

Thx you

[jade]

Hello @Lyser,

I was going to check your website but the modal that is launched after clicking the button does not have a button in it so I can’t provide any further suggestion but what @lely mentioned should help you get started. You can set an ID to the close button and check for a click event then trigger another click even to the default close option.

Hope this helps you get started.

[Lyser]

Hello @jade, yes it was for a présentation to the customer, now the button is back if it can help.

[christopher]

Hi @Lyser,

Unfortunately, this is outside of our support scope. We will be able to help you out on implement the feature but we will not be able to maintain the suggested code nor guarantee of a continued work of the code.

Please kindly add the code below to Pro > Theme Options > JS:

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

Here is the plain English interpretation of the code:

• Select a button that has boutonvert HTML class.
• Assign a function to that selected button which will be executed when the button is clicked.
• Inside the function, select an icon with the HTML class of x-modal-close which is the icon that you use to close the modal.
• Trigger a click event on that, so it will be like it is clicked.

Now whenever the button in question is clicked, the Javascript code automatically clicks the X icon and closed the modal.

Thank you.

[Lyser]

Perfect, thx you @christopher

[jade]

You’re most welcome, Lyser.