I am currently working on a website where the reveal modal window when I am at the top of the page works perfectly if I scroll down the page the modal exceeds the window size. Like so
I believe that the modal is determining that since I am scrolled the window? size is larger and determines the appropriate position to place the modal which is not in the center of the screen.
The position added to the modal is
top: 511px;
Is there a way to get around this to prevent it from exceeding the window size?
I figured out a way to prevent this from happening by adding
html {
overflow: hidden;
}
Related
I am trying to prevent my page from moving when i open a modal which is caused from the scrollbar. Originally the page would keep moving several pixels to the left and not move back each time i opened a new modal. I had to apply this css to solve that problem:
padding-right:0px !important;
margin-right:0px !important;
But now even though the page shifts back, when either the login modal or register modal is open and you press 'Sign up here', or 'Sign in here' from the loginmodal or registermodal, the scrollbar hides and then reappears which shifts the page before moving back to its original position. I experimented briefly and added overflow:scroll to the element, i didn't like the idea of the two scroll bars when the page is below a certain resolution.
So my question is:
How do i stop the scrollbar from hiding and reappearing when opening a modal when another model is already open which causes the page to shift left then back to its original position.
Here is my JSFiddle:
https://jsfiddle.net/w07dx8jk/
EDIT:
Would it be possible to have a blank scrollbar visible when a modal is open to stop it from disappearing which causes the shifting or is there a better method?
Usually, you simply leave the scrollbar visible, so it won't flicker:
html {overflow-y: scroll;}
You need to apply overflow-y: scroll !important to body to prevent the page move, !important is required because Bootstrap applies some of its own CSS to body and you need to override them.
And then apply overflow: hidden to .modal to prevent the double scrollbars.
Demo: https://jsfiddle.net/alan0xd7/w07dx8jk/1/
I use a Bootstrap Modal, to show bigger version of thumbnails in a photo gallery.
The default behavior of Bootstrap is to place the bootstrap at the top of the viewport, which usually is quite alright. But in this case, people are using the gallery in an iframe. Because of this, I want the modal dialog appears in the same height as the top of the gallery div.
I've tried positioning the modal dialog with CSS (top: 123px) but since the content above the gallery is constantly changing, this won't work. I would love to position the modal relative to the gallery with all the images.
EDIT: The link to the code is: http://bit.ly/1JCpZ9a
Just do as you mentioned! Position it relative :-)
#myModal {
top:0;
position: relative;
}
Just make sure that the modal markup immediately follows the gallery. The content after the gallery is going to jump down when the dialog appears - but I'm hoping that you don't have content (you mentioned it was an iframe)
Otherwise you'll need to have a wrapper div wrapping this extra content and position the modal absolutely w.r.t that wrapper div.
I'm using full-screen modals on my site on mobile. The problem is that touching the modal will cause the body page to move even though it's overflow:hidden;
Here's what bootstrap says about that:
Support for overflow: hidden on the element is quite limited in
iOS and Android. To that end, when you scroll past the top or bottom
of a modal in either of those devices' browsers, the content
will begin to scroll.
What can I do to prevent that?
Setting the body to position:fixed causes the scroll to jump to the top in an ugly way. What's the best solution if anyone came up with one?
I had the same question myself before.
What I did is changed the body to overflow:hidden and fixed height equal to modal height and remembered document scroll position. After closing the modal, I've applied remembered scroll position back and height to auto.
It is so complicated because I needed my modals to be bigger than window and I wanted to be able to scroll the modal.
I'm developing modal windows with the ability of being scrollable, like pinterest ones. When they are fired define overflow: hidden on body and overflow: auto on the modal box container. This works very well on desktop browsers but my first test on iPad (and I assume that probably on iOS in general) reveals a problem:
When the scrolling of the modal ends, if the document is longer than the modal the scrolling continues.
I tried this with the intention of only accept scrolling if it is triggered by the modal or its container:
// Disable browser scrolling on iOS
$(document).on('touchmove',function(e) {
if (($(e.target).attr('id') != id) &&
($(e.target).attr('id') != ('modal-'+id))) {
e.preventDefault();
}
});
And it really works doing strictly that. The modal scrolls and when it ends scrolling the page is possible only if you scroll inside the modal.
Do you have any idea?
Try it in your ipads if you want (you have to click on the modal button): http://www.onebigrobot.com/beta/altair/transforms-so
Thank you in advance!
Small changes are powerful!
All the problem is solved changing position: absolute by position: fixed on the modal container (and also on the dark mask of the background if needed). In fact with absolute positioning the modal only worked because the button was at the top of the page.
With fixed positioning desktop browsers works perfectly, and on the ipad something interesting occurs. When the scroll of the modal ends the scroll of the page begins to work but with the modal always on top well positioned.
I hope this question could be useful for someone.
I have a web page with a long list of products. Next to each product there is a link to view details about the product. The details are displayed in a modal window.
The goal is to get the same behavior you can experience when looking at pictures on facebook:
the modal window is displayed on ~50px from the top
if the modal window height is greater than the viewport height than the user can scroll down (the scroll bar is now working toward the modal window NOT the page which is in the background)
when the modal window is closed the user is at the same position in the list of products as it was before it opened the modal window.
I am almost there, expect for the last requirement. The way I have implemented this is by simply opening the modal window with JS and then use:
var winH = window.pageYOffset + 50
$('#show_message_overlay').css('top', winH+"px");
to position the modal window.
Feel free to suggest a better approach.
Thanks for any help.
The solution turns out to be more complex than I thought:
create the modal window inside a div that has the same width and height as the body element
store the scroll offset before showing the modal window
show the modal window with JS (note that the modal window div now cover the all viewport)
with JS set the scroll css value of the body element to hidden (this will remove the scroll bars from the page)
set the overflow value of the element that contains the modal window to scroll (this can be done in the css file), this will now create scroll bars if the model window is bigger than the viewport
ENJOY your awesome modal window and scroller!
once the window is closed reset the scroll offsets using JS
Isaac Schlueter over at FooHack.com has put together a great example of a CSS Modal Dialog Box that exactly fits your requirements:
http://foohack.com/2007/11/css-modal-dialog-that-works-right/
From the article:
Interaction with the contents of the parent window should be impossible until the modal is dealt with. Scroll-mouse should not scroll the background page, clicking should not click the background page, tabbing should not get you there, etc.
When you dismiss the modal, the parent window should be exactly how you left it.
The parent window should be dimmed, or there should be some other indicator that it is currently not available for interaction. This has the corollary effect of making the modal “pop” a bit more.
In a web page, a modal should be constrained within the viewport. Opening a new window just to show a dialog box is ugly as a bucket of slugs.
The modal should be placed consistently. If it is not movable, then it should be centered vertically and horizontally. This positioning should be consistent if the parent window is resized or moved.
The modal should be smaller than the parent window. If the viewport is resized smaller than the modal, then scrollbars should appear that allow the user to see the rest of the modal.
If the page's scroll bar is being altered because of user's scrolling on the modal window, you can save the page scroll position while opening the modal bar and than on closing the modal window you can set the page scroll position to the position you have saved.