Tagged: magnificantpopup, Modal
I have a modal working thanks to:
and
However, on mobile, the page scrolls to the top when a modal is opened. This means the modal is lost to the user, unless they realise and scroll down. I have tried a suggested fix:
https://github.com/dimsemenov/Magnific-Popup/issues/782#issuecomment-472645597
But it stops the modal from working at all.
How can I:
a.) Prevent the scrolling, or
b.) Limit the (body?) overflow while the modal is open
Thanks in advance.
Hey elsmore01,
Thank you for the inquiry.
Where can we check the issue? Please provide site details in the private field and a screenshot will also help.
Best regards,
Ismael
Hi Ismael,
Thanks for your reply. Notes in private content.
Hi,
Thank you for the inquiry.
In the popup script, please try to add this line after the magnificPopup function.
$('.iframe-popup-link').find('a').addClass('no-scroll');
The following threads might help.
// https://kriesi.at/support/topic/inline-popup-enabler-not-working/#post-1371471
// https://kriesi.at/support/topic/pop-up-jumps-to-the-top-of-the-page-on-mobile/#post-1360416
Best regards,
Ismael
Thanks, Ismael.
A slightly modified version worked for me – basically just adding the ‘fixedContentPos: true’ line:
jQuery(window).on('load', function(){
jQuery('.open-popup-link a').magnificPopup({
type:'inline',
midClick: true,
fixedContentPos: true
});
});
Hi,
Glad to hear that you have this sorted out, and thanks for sharing your solution, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.
Best regards,
Mike