On close, overflow=auto causes problems

[flyarrowplane]

Hello,

I notice that, when you close a modal, my page has some issues. The plugin adds the "overflow:hidden" property to the html and body tags when you open a modal. When you close them, it updates the property to "overflow:auto." In my case, this is problematic -- other scroll-related things don't work anymore and I see the scrollbar (in Firefox) is not fully functional. However, changing it to "overflow:visible" in the callback works. Wondering if that should be the default?

[cdfournier]

Unfortunately, when I change the js values to "overflow:visible" I get 2 sets of scrollbars: one for the modal and one for the body. This is not ideal. I'm also suffering from modal links that jump to the top of the page while opening the modal (because of the href="#"?). Also not ideal, in terms of user experience.

[imoddesign]

I have same problem when use on OnePage, and this is my solve afterClose: function() { $('body').removeAttr('style'); }

[CrisDev93]

This was my solution :

removing $('body, html').css({'overflow':'auto'}); from the plugin on Close and Open modal methods.

$('body').removeAttr('style'); solution doesn't work perfectly for me because before to open modal the main page scrolled to top.

[crobinson42]

Anytime you change css on body or html it should be restored to previous values.. in my example I use a plugin for jQuery smooth scrolling which breaks after closing animatedModal due to the setting of $('body, html').css({'overflow':'auto'}); - in my case the overflow should be restored to visible after the modal is closed.

For me this fixed my problems:

closeBt.click(function(event) {
            event.preventDefault();
            $('body, html').css({'overflow':'visible'});
            // $('body, html').css({'overflow':'auto'});

// removed for brevity...
}

[riotactstudios]

Here is the fix that worked for me: I was having trouble with iOs devices, after opening a modal and closing it, I would be unable to scroll the screen until I refreshed. From my understanding, this is due to an issue with iOs and z-index. I added a few lines of code to move the modal to the left -9999 as well.

Under the Defaults, add the following: leftIn:'0px', leftOut: '-9999px',

Remove: left: '0px',

Under Init Styles replace: 'left':settings.left, with: 'left':settings.leftOut,

Under Apply Styles replace: id.css({'opacity':settings.opacityIn,'z-index':settings.zIndexIn}); with: id.css({'opacity':settings.opacityIn,'z-index':settings.zIndexIn, 'left':settings.leftIn});

In the afterClose function replace: id.css({'z-index':settings.zIndexOut}); with: id.css({'z-index':settings.zIndexOut,'left':settings.leftOut});

[ccsousa01]

$('a[name="animate"]').animatedModal({ afterClose: function () { $('body').css('overflow', 'hidden'); } });

[nickfmc]

it's probably better to only remove the overflow class not all your inline styles just in case you need those for some reason. setting to visible would work but as it's inline style it's going to overide any overflow-x css you may have on the body etc. When the overflow class is set to nothing it is removed and wont interfere with your style sheets at all.

afterClose: function() {
    $('body').css({'overflow' : ''});
 }