Page scrolls to top when modal is opened issue - javascript

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.

Related

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

Position a Modal to the current window - jQuery

I have actually created a modal pop-up which pops up when someone clicks on an element on my website.
However it always pops up at the top of the page / bottom of the page (where I have inserted the code.) Fixed, also isn't a good solution, as if the modal is long, it cannot be readed.
I basically want it to pop up for example 50px lower than the current window, so it will always pops up to the user, he/she doesn't have to scroll down/up.
Is there any plugin to solve this solution, in jQuery?
Google search for: 'jQuery modal popup' gave me this http://dinbror.dk/bpopup/ – looks exactly like what you need.

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

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.

CRM 2011 - Open a Popup from a page in an IFrame

In CRM2011 I have an IFrame that displays a custom ASPX page (a photo gallery). From that page when they click a photo, a new popup should appear with the photo in real size.
What do I have to do to make this work? I tried several methods, none of them are working. It works fine when I'm opening the page in a browser! When I click on a photo, the real sized photo opens in a new screen.
My methods with javascript are :
click => When I use that method, it opens a new window with the complete page that is shown in the IFrame. If the iframe is "http://myPage.aspx", it will open a new window with "http://myPage.aspx" instead of the photo....
<span onclick="window.open(....)">click</span> => Nothing Happens
click => Same happens like method 1
I've tried many other things, but none of them had the wanted effect...
Kind Regards,
Frederic
Thx for your reply.. But unfortunately, it doesn't work. It still opens the same page in a new browser while clicking on it in an IFrame, instead of a popup.
It even gives me a weird behavior when I click on it opened in a normal browser. It opens an popup, but it also opens a second screen with the page itself.
So I still haven't found a way to open it correctly from an IFrame.
Kind Regards,
Frederic
My problem is solved... Somebody has activated the "Restrict cross scripting" on the iframe on the CRM. It works like a charm now, when i deactivate that option!
Thx for the help!
I would change this code:
click
So that it has a target and the script is identified as JS:
click

browser window to stay on top like the "showModelessDialog" method

I would like to have a browser window stay on top of other windows similar to the "showModeLessDialog()" method. What I dont like about the "showModeLessDialog()" method is that once the user moves to another page the modeless dialog box disappears.
To get around the closing of the browser window by just opening the browser window through window.open() but the one feature im lacking that I really want is the stay on top featured.
Any ideas on how to accomplish that? The showModeLessDialog is doing it...
Also, Im well aware of various opinions on the subject of forcing windows to stay on top so no need to remind me. I have a good reason for this I assure you. :-)
Are you using javascript for popup window,
http://javascript-array.com/scripts/window_open/
you can set these parameters top=20,left=20

Categories