Modal Toggle not working correctly with a scroll effect in place

[Travis_Holman]

https://sorianolaw.travisholman.com/about/

On this page I have a modal inside of a div that has a fade in effect applied on scroll. The modal toggle works fine when it first appears, however if the user scrolls back up and then down again the toggle ceases to open the modal. It also seems to stop working if you open, then close out the modal and then try clicking the toggle again. It seems to have something to do with the opacity scroll effect so I am just wondering if there is a solution?

[tristup]

Hi @Travis_Holman,

Thanks for reaching out.
I have checked the website and found the issue you described here. I suspect there might be some different reasons behind your reason, I would like to suggest troubleshooting the following common issue to help us recognize the reason.

1.Theme Related Issue
2.Plugin Conflict
3.Theme Update related issue
4.CSS/JS Customization
5.Disabling Cache
6.Disabling CDN

If you discover that an issue is coming from a custom code or 3rd party plugin, kindly consult with a developer or contact the plugin author. Please note that we do not provide support for custom codes and 3rd party plugins.
If none of the above helps, please provide login credentials for your site in a secure note to examine it further, including:

– WordPress Site URL & Login URL
– WordPress Admin username/password

To create a secure note, click the key icon underneath any of your posts.

Thanks

[Travis_Holman]

Hi, thanks for the response. I went through each of those steps and none of them solved the issue. The modal works fine if I remove the fade scroll effect so there’s gotta be some kind of issue there. I left the login information for you in a secure note.
Cheers
Travis

[ruenel]

Hey @Travis_Holman,

Please remove the Effects you have added in the Contact Modal element.

You should be adding the Effects to the DIV element instead.

Cheers.

[Travis_Holman]

I still get the same behavior. I actually originally had the effects on the div but I had switched it to the Modal just to see if it would work.

[ruenel]

Hey @Travis_Holman,

I have investigated the issue. By default, the pointer-events, once the Effects gets rendered, is set to none.

.x-effect-exit, .x-effect-entering, .x-effect-exiting {
    pointer-events: none !important;
}

We need to override the pointer events of the Modal Toggle by inserting a custom CSS for the toggle ID. For example;

#contact-modal-anchor-toggle {
  pointer-events: auto !important;
}

Check the page now. Thanks.

[Travis_Holman]

@ruenel

I have investigated the issue. By default, the pointer-events

Perfect, thank you!

[tristup]

Hi @Travis_Holman,

Glad that we are able to help you.

Thanks