1

There are two problems that are both independently well-documented, but the solutions appear to be mutually exclusive from what I can tell.

The first is that when we open a modal, we want to be able to stop the screen from scrolling, which is prevented by doing something akin to this: disable browser scrolling while jQuery UI modal dialog is open

There is a second problem, which is that when the modal opens, the screen is forced to scroll back to the top of the page, which can be prevented by using the following: Prevent CSS Modal from scrolling to top

i.e. to solve the first issue, adding the following to body css solves the issue: 

overflow:hidden;

and to solve the second issue, adding the following to body css solves the issue: 

overflow:visible;

The problem I face is that I want both to be true. When the modal opens, I want the scrolling to be disabled, AND I want to have the page freeze at the place the user had scrolled to, rather than jumping back to the top. Neither of these solutions will allow both of these actions simultaneously.

Does anybody know of a solution that would solve these two at the same time?

Community
  • 1
  • 1
chris
  • 1,869
  • 4
  • 29
  • 52
  • for not jumping use href="/#" – vamsi Sep 28 '16 at 12:54
  • Both questions deal with different kinds of modals – the first one with one implemented via jQuery UI, the second one with a pure-CSS modal. We don’t even know which variant you are using. Please update your question with an example that shows the problem. – CBroe Sep 28 '16 at 12:55
  • I'm not specifically familiar with jQuery's modals, but can you give a live example of the issue? I guess the scrolling happens because of an `href="#"`, which can probably be removed (but I'm guessing in the dark). – Narxx Sep 28 '16 at 12:55

1 Answers1

1

My solution: To prevent scroll. When open the dialog add a class to body like:

.modal-open {
    overflow: hidden;
}

And remove class when close the dialog.

To prevent moving top. In jquery, in the function where you open dialog, add preventDefault

Germano Plebani
  • 3,461
  • 3
  • 26
  • 38