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.
Related
I'm using Dialog API. To determine dialog's height I need to get the size of visible area of the screen (i.e. window.innerHeight). I tried accessing innerHeight property from within function file or dialog file, but got 0 in both cases. I'm guessing that it's due to dialog running in an iframe, but is it possible to get visible screen's area in some other way?
UPDATE: the requirement that I have is to prevent vertical scrollbar in the dialog. I am creating controls dynamically and adding them to the dialog. Thus I need to resize the dialog to fit the controls preventing the vertical scrollbar and extra whitespace at the bottom.
Our default top position for a modal window using Foundation Reveal is 100px. I don't want to change that, except for one specific modal which needs to be 40px.
How would I do that? Current open call looks like this:
$('#pgquickview-modal').foundation('reveal', 'open');
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;
}
I'm trying to create a popup which uses window scrollbars not the div ones. Something like what is on http://pinterest.com. How to achieve this effect? All my tries are unsuccessful, scrollbars appear on div. Window scollbars scroll the body content.
When you open popup window, you should remember current window scrollLeft/scrollTop positions somewhere, then apply overflow:hidden, height/width:100% to html and body, which will prevent page scrolling.
Create overlay div with position:absolute, z-index:9999, left/top:0, height/width:100%, overflow:auto, and append it to body - it will be scrollable container of your popup.
Inside of this container create div with position:absolute and left/top values, calculated in js to center it if necessary.
After you close popup, restore overflow, height/width styles for html/body, and apply scrollLeft/scrollTop values that were saved before opening popup.
Let me try and make sense. I have a search page that returns lots of search results just like Google. Each of those search results have a trigger (via an icon using onmouseover) to access more info in a popup window that pops up to the right of all the search results, just like google. Here is what I want from the popup window:
No matter if I am looking at the first search result at the top of the page, or the last search result way down at the bottom of the page, I want the popup window to align itself with the top edge of the screen, regardless of where I am vertically on the page (similar to fixed)
BUT, if the popup window happens to contain more data then the vertical screen height allows, instead of the popup window creating scrollbars internally, I want the popup window to scroll right along with everything else on the page (similar to absolute)
The problem is that fixed chops off data that goes below the bottom of the visible browser window height making it inaccesible without internal scrollbars. With absolute, the popup scrolls along with all the other stuff on the page which is great and what I want, but it always appears at the very top of the page, even when I am at the bottom of the page, making it invisible to the user if the results list is very long.
Its like I am trying to combine the two methods in a way. So to summarize:
When I trigger a popup via onmouseover, the popup window should affix itself to top edge always no matter where I am vertically, but if its content is vertically taller than the screen allows, I should be able to scroll the entire page down to see the rest of it. I should not have to use internal scrollbars within the popup window like fixed.
Is this possible and how should I go about it? Thanks!
You're going to need JavaScript.
First, make set the popup divs to position: absolute. This will act like fixed in that it can go anywhere on the page easily through left and top, but it still scrolls with the page.
On link hover, make the JS detect the browser's scroll position (through window.offsetY or $(window).scrollTop() in jQuery). Apply this offset to the popup:
$('.link').on('click', function () {
$('.preview').css('top', $(window).scrollTop());
});
Remember also to tweak the other CSS properties of the popup to suit your needs - however, most of that can be done in CSS; the only JS you really need is for the top property.
Fiddle: http://jsfiddle.net/GWvNx/