The title pretty much says it all. Whenever I have a modal open and I try to scroll the page it works perfectly fine anywhere else in the modal except for the video element. Here’s my site: new.ecp.church/missions/#at (#at is the modal trigger and can be manually selected from the grid at the bottom of the page) . I do also have a hopefully quick second question: is possible to reset the toggle hash after closing the modal? I ask this because once you do close out of the modal to reopen it you have to a) refresh the page or b) open another modal and then reopen the first one. Thanks!
Hi Michael,
Thanks for reaching out.
What do you mean but the scrolling issue in video element within modal? The modal is a full-screen without scroll bars and there is nothing to scroll. But I’m able to scroll the page even with modal and video.
The hash can’t be reset by default, and would require customization if you plan implementing such feature. Example https://stackoverflow.com/questions/6118693/how-can-i-change-the-page-url-without-refreshing-the-page and for that, I recommend contacting a developer since this isn’t a simple one.
Thanks!
Sorry, to replicate the problem if you position your cursor in the YouTube video frame it will scroll the main page behind the modal. The problem is that some of the modals on my site are long enough that they go off screen which in turn allows them to become scrollable (see https://new.ecp.church/missions/#pcc as an example.) I know hypothetically I could make the YouTube video in the modal a smaller size, but in the long run on mobile phones I will still more than likely run into the same issue.
As for the modal hash reset, thanks for that link I will definitely read more into that. For a more short-term fix, Is there some JavaScript to “soft” reload the page or perhaps a function that could be called from within Pro to re-trigger the modal to open?
Thanks for all the help!
Hello Michael,
You will need to move away from the video before you can scroll the page. The Youtube video players has it’s own script that detects mouse movements which is why you cannot scroll over the video. You will have to move your cursor within the modal content outside of the video player so that you can scroll it.
Regarding your #hash, you are using a button which is anchored or uses #hash. When you click on it, it will be treated like a link which will modify the address bar url. As soon as you close the modal, you cannot display it again because the address bar url has already the hash. You are triggering the modal content area incorrectly. This is the reason why you are having this issue.
To resolve this, please add this JS code in the Theme Options > Global JS (http://prntscr.com/evswzb)
(function($){
$('.x-modal-close').on('click touchstart',function(){
location.hash = '#home';
});
})(jQuery);
We would loved to know if this has work for you. Thank you.
That works great! Is it possible to have that kick in when you close the modal but don’t click on the close button (clicking in the greyed-out space)?
Hey Michael,
Please have the code updated and use this:
(function($){
$('.x-modal-close, .x-modal-content-outer').on('click touchstart',function(){
location.hash = '#home';
});
})(jQuery);
We would loved to know if this has work for you. Thank you.
You guys are phenomenal, that worked perfectly! So I guess I’m more or less stuck with the YouTube embed at this point, or are there any tricks that can be pulled with that? Thanks!
Hi Michael,
It’s good to know that it works for you.
Regretfully the scroll over youtube video is beyond our control.
Cheers.
Oh okay, I wasn’t sure if something like this:
body { overflow: hidden; }
could be used with the modal because it solved the scrolling issue on my main pages within the YouTube embeds. Thank you!
Hello Michael,
That css code will affect other pages as well. If you want to apply it only for the modal content, you can update it into this:
body .x-modal-content-inner {
overflow: hidden;
}
Hope this helps.
I gave that a shot and didn’t have any luck, so I guess I’ll go ask around on the google forums. Thanks to you and the rest of your team for all the help!
If you need anything else feel free to create another ticket 
Will do, thanks!
You’re welcome.
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.