CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Matteo Melani
Matteo Melani

Reputation: 2726

Position a modal window

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:

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.

Upvotes: 4

Views: 4825

Answers (3)

Lucas Balzer
Lucas Balzer

Reputation: 316

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.

Upvotes: 1

Matteo Melani
Matteo Melani

Reputation: 2726

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

Upvotes: 2

Anze Jarni
Anze Jarni

Reputation: 1157

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.

Upvotes: 0

Related Questions