Modal scrolling #3353

Closed
dtodor opened this Issue May 4, 2012 · 16 comments

Projects

None yet
@dtodor
dtodor commented May 4, 2012

Scrolling inside a modal window causes the page in the background to also scroll. Tested using: http://twitter.github.com/bootstrap/javascript.html#modals on Chrome 18 and Safari 5.2. On Firefox 12, the issue is not present.

dtodor commented May 5, 2012

Well, the behavior in Firefox is different. So this alone is an issue.

Pajk commented May 5, 2012

In Firefox when I continue to scroll after the modal is at the bottom (with touchpad or mouse wheel), whole page start to scroll too. But not immediately like in chrome.
But i agree with you, I dont like this behavior too.

Have you managed to fix any part of this behavior?

It's really confusing for the users when the background starts scrolling and after closing the modal the page location isn't the same as when the modal was opened.

on open apply a style to the body for overflow:hidden; if that doesn't work sometimes you can try to set the position to absolute on the body, but that requires more work.

another option could be based on not having the modal and other scrollable elements be in it's ancestors list.

@dtodor You can set overflow: hidden on the body when a modal is open. The modal pulgin adds a modal-open class to the body: https://github.com/twitter/bootstrap/blob/master/js/bootstrap-modal.js#L51

body.modal-open {
    overflow: hidden;
}
dtodor commented Jun 13, 2012

OK, thanks.

Owner
mdo commented Aug 17, 2012

Closing out until we can rewrite some of our modal code to better handle this. #4403 takes a great first step with it, so I'd like to see us push that. Until then, we'll have to leave it.

@mdo mdo closed this Aug 17, 2012

I should submit some of the code we have been using at Telly.com. we
modded the coded a bit to support ajax/iframe modals.

http://telly.com/v3/js/tv.bootstrap.modal.js

On Fri, Aug 17, 2012 at 4:49 PM, Mark Otto notifications@github.com wrote:

Closing out until we can rewrite some of our modal code to better handle
this. #4403 #4403 takes a
great first step with it, so I'd like to see us push that. Until then,
we'll have to leave it.


Reply to this email directly or view it on GitHubhttps://github.com/twitter/bootstrap/issues/3353#issuecomment-7839162.

Justin Kruger
Social Media Software Engineer -
San Francisco, CA

http://jDavid.net
http://twitter.com/jdavid
http://www.linkedin.com/in/jdavid

jDavid.net@gmail.com

Contributor

I'd be -1 on adding ajax to modal. There is no reason why you can't do that externally of the plugin. Just implement a handler for the show event to do whatever you need to render the contents of the modal.

Please see #2130 (comment), #2130 if you'd like to use a jQuery snippet to fix this issue.

*for mobile that is

As a note

body.modal-open { overflow: hidden; }

Will not work in ie7, the overflow needs to be applied to the html tag rather than the body so you will need to move the .modal-open class to the html tag in bootstrap.js

thezoggy commented Sep 3, 2012

might be better off using jquery ui for legacy browser support.. or go jack some of their code/css.. ie7 is pretty ancient and honestly a better fix would to force ie7 users to just use chrome frame which will add html5 support and no admin rights needed.

can do something like:

        <!--[if lt IE 7]>
            <p class="chromeframe">You are using an outdated browser. <a href="http://browsehappy.com/">Upgrade your browser today</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to better experience this site.</p>
        <![endif]-->
Contributor

A modal should not having more content than a window. This is not a implementation issue, this is a bad use of the modal, as you can see in a lot of usability guidelines:
"If your modal window is taller or wider than the user’s screen, they’ll have to scroll to see all of it. This makes it painful for users. It would also cover up most of the main window, making users think that they have left the main window and are looking at a new page. Make your modal windows small, so that it doesn’t cover up the main window and users don’t have to scroll."
reference: http://uxmovement.com/forms/modal-windows-best-practices/

Owner
mdo commented Jul 19, 2013

@alexanmtz I just mentioned in #4403, but the switch has already been made. If you or anyone else here has feedback on that, please open a new issue instead of digging up year-old issues :).

That said, I really don't see us changing this at all in v3.

@cvrebert cvrebert locked and limited conversation to collaborators Jul 28, 2014
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.