Twitter Bootstrap: Prevent Body from scrolling when a modal is opened - javascript

The issue I'm having is that when a modal is opened, the background body is scrollable using the mouse wheel.
Seems like this problem is known and people have suggested to set the body to overflow:hidden as stated in this link:
Prevent BODY from scrolling when a modal is opened
which works fine if your page is short and the modal link is on the initial visible page. However, if you have a longer page and you have to scroll down to see the modal link, once you click to open the modal, the background body shifts to the top.
The background does not scroll anymore, which is what I want, but is there any way to prevent it from popping back to the top when the modal is opened? It's inconvenient when you need to add multiple entries of something using the modal and you have to keep scrolling down to click the modal link to add another item.

In your onclick(I'm guessing you use onclick) event-method insert a return false; at the end, that will prevent the site from scrolling to the top.

I was having a similar problem in which modals larger than the window were cut off, and scrolling anywhere would scroll the background and not the modal.
This question pointed me to this plugin which is simple to use and fully addresses mine in addition to your problem of not permitting the background to scroll:
However this issue is said to be resolved in Bootstrap 3 and the plugin should not be needed if you're using the current version of Bootstrap.

Related

How to stop page from scroll when toggle text opened?

Quick note : I have read other similar questions, but they are all about modal opening up as overlay on body and they want to stop scroll on body.
But in my case, when I open the toggle the page autoscrolls and I don't want that to happen I want it to stay at same place.
Here is the link ( http://isma.tomorrowing.today/ ) where you can see the issue in test text 2 or 3 section by clicking any of the 'Read Text' button.
I want the webpage to stay at some position even when toggle is opened.
Although I am using elementor in Wordpress on the website, but custom CSS or JS works for me as well.
Highly appreciate any help.

jquery modal prevent scrolling AND prevent moving back to top of page on modal open

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?
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

How to figure out browser scrolling issue

I am developing a web part within Sharepoint that makes heavy use of 3rd party web services.
In my page, I have a view element (div#act1_show) that is collapsed. When I click on the expand button, the data is shown. No problem there.
The data of that element can be edited when that element is collapsed when I click the edit button. This actually hides the view element (div#act1_show) and shows a different edit element (div#act1_edit). No problem there.
However, when I first expand the view element (div#act1_show) and then click the edit button to open the edit element (div#act1_edit), the edit element is opened but now I can now longer scroll the page. That is, I can no longer use the scroll bar on the right of the browser window.
I've looked for any css position fixed but found none.
So, can anybody suggest how I go about figuring out how to find the cause of no longer being able to scroll with the browser's scroll bar?
Thanks

Page scrolls to top when modal is opened issue

I have an issue with a modal that I programmed. When it is opened or closed, it goes to the top of the page. I want the page background to stay exactly where it is opened and not move. I have it opening with JavaScript and have tried
$("html,body").css("overflow","hidden");
but it does not work. Any other thoughts?
Got it figured out (although not sure if it is the best way). I replaced
Open Modal
withOpen ModalI am up for better options if there are.

Set div position fixed without page jumping up

I have a modal dialog (jquery.dialog) that opens up when a user clicks on a link. I want to hide the scroll bar on the page behind the dialog, so user will not be able to use it. This works perfectly fine with the overflow:hidden except older IE browsers that mess the entire page up when doing that.
So I came up with this to make it work in the IE: I created a div that was covering the entire content of the page and set it to position:relative and width/height:100%. Then anytime, the modal dialog opens up, the position gets set to fixed. That makes the overwflow:hidden work in old IE.
Now, the other problem came up. When the user is at the bottom of the page and clicks on the links, dialog pops up, but the main page jumps up to the top.
I want the main page to stay intact if possible. How can I do so?
Thank you.
The code to show/close the dialog:
show:
$('#allContent').css({ position: "fixed" });
$('#viewJobPanel').dialog('open');
$('#allContent').css('overflow', 'hidden');
close:
$('#allContent').css('overflow', 'visible');
$('#allContent').css({ position: "relative" });
$('#viewJobPanel').dialog('destroy');
and when user clicks on the link, I have this event handlers
e.preventDefault();
e.stopPropagation();
Use a span bound to a click event instead of an anchor element to avoid the default behavior of repositioning the top of the window.

Categories