-
-
Notifications
You must be signed in to change notification settings - Fork 78.7k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add option to prevent body shift on modal open #12883
Conversation
* Add `scrollpad` option to modal.js, disable by default * Add description for `scrollpad` modal option in javascript docs
It was alleged by two of the commenters that this doesn't work in some browsers: |
Also, why even have an option for this, as opposed to just always enabling it? |
Chrome 33 Windows 7 works fine. Don't see why it wouldn't work in Chrome 32 unless there's some kind of bug. The reason to disable this by default is two-fold:
|
Also, the solution that mine is based on missed the key point of having |
WRT to IE10 and this comment: #9855 (comment) The problem seems to be a part of What this means is that modals in IE10 do not need extra body padding since there is effectively never a scrollbar.
if (! (!! navigator.userAgent.match(/MSIE 1/) &&
document.documentElement.clientWidth === window.innerWidth) && options.scrollpad) {
// IE 10/11 AND scrollbar shown or a different browser AND scrollpad wanted; apply body padding
} -- OR --
$('#myModal').modal({
scrollpad: ! (!! navigator.userAgent.match(/MSIE 1/) &&
document.documentElement.clientWidth === window.innerWidth)
}) I'm somewhat opposed to idea 2, since, while I feel this is the intended behavior for most cases, it would be impossible to alter the behavior downstream. It may be better to implement idea 2 with checking if the root element's // Is not MSIE 10/11 where there is no visible scrollbar and document root has no explicit setting for -ms-overflow-style AND options.scrollpad is true
if (! (!! navigator.userAgent.match(/MSIE 1/) &&
document.documentElement.clientWidth === window.innerWidth &&
document.documentElement.style.msOverflowStyle === '') &&
options.scrollpad) {
// autohiding-scrollbar not is enabled, or there is a scrollbar and options.scrollpad is true; apply body padding
} Idea 1 would likely create inexplicably awful looking pages by default in Windows Metro and on the Windows tablets, so I think that idea is a clunker. I think that idea 3, while more complicated for the end user, would allow users for whom the background shift is an issue to have a solution with very little "magic". I'm open to any thoughts on this. |
OK, made some changes.
I also changed this to be the default for modals, but left it as an option so it can be turned off. This is tested as working on: |
fixed already, thanks man! |
scrollpad
option to modal.js, disable by defaultscrollpad
modal option in javascript docs