How to disable page scroll when opening dialog box? - javascript

I'm having significant trouble with a jquery dialog box that opens in response to a .hover() command, and closes upon leaving the hover (which of course takes two functions).
When the dialog box opens a little bit out of the page, the entire page scrolls up; I want to disable this but I can't figure out how.
I have tried:
using event.preventDefault()
putting the ui-dialog css as 'position: relative'
setting the scroll bar back where it was (but this looks terrible)
Any other ideas?
Edit: Here is the code in jsfiddle: http://jsfiddle.net/TzUf3/1

Make sure the popup has its position fixed, then set the body to overflow:hidden;
When the dialogue is closed remove the overflow attribute.

Related

Bootstrap: overlapping modal should not freeze underlying modal from scrolling

I KNOW that Bootstrap discourages overlapping modals. I hacked together a site really quickly to help with the whole coronavirus thing, and so my focus was on speed not getting everything perfect. Consequently today someone pointed out a bug. Normally what happens with a Bootstrap modal:
Bootstrap sets scroll automatically a based on modal content, that is if content requires scroll, I guess the appropriate CSS is added
When a modal is open, the background content (that's covered by tinted overlay), is not scrollable
Once the modal is closed, the background content becomes scrollable again
My problem right now is that in my overlapping modal situation, the second modal that opens on top of the first one causes the content of the first modal to stay unscrollable, even when the second, overlapping modal is closed.
My desired behavior is that when the second modal is closed, the first modal returns to "default", that is, if the content requires scrollability, the scroll returns.
Here's a live site: https://www.giftcardsforsmallbusinesses.com/
Click to follow the modal: If you would like to be listed here, click here (ensure you're viewing this on a screen when there modal content requires scrolling, which is most screens... it's a lot of content)
On the modal that pops up, find #4 on How It Works, and click the bonus value
A second, small modal will pop up
Now close the second, smaller modal
You'll notice now that the first modal: Are you a small business owner? is no longer scrollable. Curiously, the background content, the original page, is now scrollable
I feel like there's a quick & dirty answer here... I can just inject something where it's like
PSEUDOCODE
$("#second-modal").on("close", function() {
$("#first-modal").resetDefault()
})
But I don't have enough experience with Twitter Bootstrap to know how to do this, and I couldn't find the answer in the docs.
This should fix it...
$('.modal').on("hidden.bs.modal", function (e) {
if ($('.modal:visible').length) {
$('body').addClass('modal-open');
}
});
When you close the overlapped bonus modal, it removes the body class .modal-open by default (not knowing there is another modal below it). This class applies overflow:hidden; to the body and enables modals to scroll independently.
So the above script is basically adding the class again when the bonus modal is closed/hidden.
Try this, this is directly targeting the bonus modal hidden event.
$('#expirationModal').on('hidden.bs.modal', function () {
$('BODY').addClass('modal-open');
})

Pop up problems with scroll

This is what i'm trying to create CodePen example
The idea is that the popup should work exactly like the Pinterest Link
The problems i have are:
When u close the pop-up, the page always jumps to the top. It should stay where it was
The popup is fixed, how can i make it that you can move it like on Pinterest? I would like to have some spacing on the top and when u scroll u actually move the up
If u have any chance to view this on mobile, please do. I want to make the site responsive. If u view the pop-up in the mobile version, it isn't smooth. That means when u scroll and move you finger from the touch screen, the scroll stops immediately. So it feels like you need to push the content down with you finger. It doesn't flow so u could swipe and it would stop slowly
I try to figure this out for days already and can't get it. Any help is welcome :) tnx!
Instead of using anchor tag for the close button like this :
<div class="close">close</div>
Do this instead :
<span class="close">Close</span>
Don't forget to add cursor:pointer style for .close class.
Your problem will be solved.
Right now, the image that triggers popup disappears when you click close button on firefox just in case if you haven't checked on it yet. So, better not use anchor tag for the close button. My suggestion would be Never use anchor tag for close button.
Hope this helps.

Can you give a Modal Window (using Twitter-Bootstrap) a z-index?

I have a form using Qtip2 and if the user submits the form with invalid values, the qTips fire correctly (so far so good). However, say the user wants clicks on a button that triggers the modal window to appear, the modal window appears above the form but below the qtips. So, I'm thinking, just give the Modal window a higher z-index value.
Modal Example with qTip
Has anyone else run across this behavior and what did you do to resolve it?
The lastest version of bootstrap shows the modal has a z-index of 1050. I believe the default z-index of qTip2 is 15001, and goes higher from there. You would have to up the z-index of the modal.
Edited: Removed incorrect information.

How to temporarily disable scrolling of webpage when displaying a dialog box?

How can I disable scrolling of webpage when displaying a dialog box. I want to avoid using modal=true here, as it does not allow me to keep the other sections of the page to be active.
I want to keep both the visible section of the webpage as well as the dialog box to be active but want to disable scrolling of page for the time overlay is displayed.
You could do
body { overflow: hidden; }
I wouldn't recommend this approach, instead, put your dialog box in a div with position: fixed

What is it called when a popup appear "over" a wepage?

when you visit http://www.daniweb.com you get a popup window, what is this called + any idea how to do it?
Thank you for your reply, what is the simplest way to do have a modal loading animation only i.e. when page loads that animations shows and when done the animation goes? ASP.NET/Ajax
You'd call this a modal dialog, and you can implement one very easy with jquery ui:
http://jqueryui.com/demos/dialog/#modal
I like to refer to these windows as ANNOYING
The other name is some form of JS or JQuery.
Its called a javascript popup window.
Here's a link to show you how to open a js window
The way it looks though is they are using the modal popup extender provided by the ASP.net AJAX Control library. This can be simulated via JQuery as well.
It's called a modal dialog window. "Modal" meaning "mode" as in the UI has two modes, one where you can only interact with the dialog window, the other where there is no dialog window and you can interact with the rest of the page.
Probably looks something like a lightbox/thickbox .Showing some text/html instead of images
This is a modal pop up window, meaning you can't do anything else while that window is open.
Here are a bunch of ways to make them.
You can set up this kind of popup by having Javascript on the onload event create an overlay div that has height 100% and a higher z-index than the content, and also a div for the popup with position fixed and an even higher z-index. Then when the user clicks on close or otherwise it is time for the popup to go away, the Javascript can set display: none on these divs.
You can use Firebug (or IE Developer toolbar) to see the styles used on the example page you mentioned and use that as a model.
(Also they are annoying, but at least better than pop-unders, IMO ;-) )
Thats a modal dialog popup. Here's a nice jQuery version that I have used before.

Categories

Resources