search

vodkabears / Remodal

No longer actively maintained.
http://vodkabears.github.io/remodal/
MIT License
2.75k stars 771 forks source link

Modal window appears shifting of the all page content #247

Open zenyaz opened 8 years ago

zenyaz commented 8 years ago

When i click and window opens - all my page content (including html background) shifts to the right a bit. I think it caused by html.remodal-is-locked { overflow: hidden} If i remove this property - everything is ok, but scrollbar on the right of modal background appears (not good)

DavidEaston commented 8 years ago

Having a similar issue here and there are solutions out there. The reason the class does what it does is, it makes all of the content on the page not scollable, which means browsers will remove scroll bars on content that has no overflow to scroll to.

On most browsers (I believe IE is an exception here) the scroll bar is not factored in. For example a centered block factors in the scroll bars when centering so when the scroll bar vanished on overflow:hidden, it re-positions the center line, moving all your content to the right.

If you google how to compensate for the lack of scroll bar you will find a few different ways of over coming this.

Hope that helps, as I was looking into this as well.

zenyaz commented 8 years ago

Thanks for reply. When i tried google-d solutions - i didn't receive proper result. Sometimes i realized "body" proper behavior, sometimes "html" proper behavior, but never both of them. My solution - i commented lockScreen() and unlockScreen() procedures, but i don't understand - is it ok or not for overall usability?

DavidEaston commented 8 years ago

Are those functions the ones used in the javascript to lock the screen? So you mean you have left it so if a modal is open, you can still scroll? Honestly I could not be hassled with trying to solve the issue so left the scroll bars on so you can scroll.

I feel like if a user has initiated a popup/etc they are reading the contents of it and either end up clicking the contents or if they want to continue going through content on page, they can exit the modal and scroll. Users should naturally close the modal before continuing. Unless it is not obvious how to close the modal because being able to scroll with a non-closable modal/popup screams glitchy to me.

I am sure there are easier solutions out there but for the time being I am ok with this usability sacrifice...