Place modal window

Question

I have a web page with a long list of products. Each product has a link to view product details. Details are displayed in a modal window. The goal is to get the same behavior you might experience when viewing photos on facebook:

• the modal window is displayed at ~ 50px above
• if the height of the modal window is greater than the height of the viewing window than the user can scroll down (the scroll bar now works in the direction of the modal window, and not the page that is in the background).
• When the modal window is closed, the user is in the same position in the product list that was before he opened the modal window.

I am almost there, waiting for the last call. The way I implemented this is to simply open the mod window using JS and then use:

var winH = window.pageYOffset + 50 $('#show_message_overlay').css('top', winH+"px"); 

to place a modal window.

Feel free to suggest a better approach.

Thanks for any help.

Answer 1

The solution is more complicated than I thought:

• create a modal window inside the div having the same width and height as the body element
• save scroll offset before showing modal window
• show modal window using JS (note that the modal div window now covers all viewports)
• 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 containing the fashionable window for scrolling (this can be done in the css file), now scrollbars will be created if the model window is larger than the viewport
• ENJOY your awesome modal window and scroller!
• after closing the reset window scroll offsets using JS

Answer 2

Isaac Schlüter at FooHack.com has put together a great example of the CSS Modal dialog box that exactly matches 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 not be possible until modally processed. Scrolling the mouse should not scroll the background image, click should not click on the background page, the tab should not take you there, etc.
• When you reject a modal, the parent window should be exactly the same as you left it.
• The parent window should be darkened, or there should be some other indicator that is currently unavailable for interaction. This has the effect of modal "pop" a little more.
• On a web page, the modal file must be limited in the viewport. Opening a new window to display a dialog box is as ugly as a bullet bucket.
• Modal should be arranged in series. If it does not move, it should be centered vertically and horizontally. This positioning must be consistent if the parent window is resized or resized.
• The modal must be smaller than the parent window. If the viewport size is smaller than the modal, then scrollbars should appear that allow the user to see the rest of the modal file.

Answer 3

If the scroll bar of the page changes due to the user scrolling in the modal window, you can save the scroll position of the page when you open the modal panel, and when you close the modal window, you can set the scroll position of the page to the position where you were saved.