The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

[Solved] Container Modal Window Dimensions

  • # June 15, 2009 at 2:44 pm

    Below you will find a PhotoShop mockup of what I am trying to accomplish:


    I basically have a simple site, with a navigation bar and the respective links. Each time the user clicks on one of the navigation links (i.e. Home, About, Contact) a modal-like window pops up displaying the content. So, instead of a normal page refresh taking place, I have created a desktop-like atmosphere where a modal window loads with its respective content. The user can click the "x" button in the upper right-hand corner to exit out of the window and return to the main screen (in this case, the solid grey background will be displayed as the modal window is wiped away). I am loading these pages via JavaScript (jQuery).

    I essentially have created three unique files: home.html, about.html, and contact.html to load into a #container within index.html. Each of these three files, has the HTML structure and CSS for the modal window as well as the content (text, images, etc.).

    I would like to be able to standardize the size of the modal-window. So in other words as the PhotoShop mockup depicts, I would like the green modal-window to stay consistent in size/dimensions. In effect, areas: A, B, C, D should always retain the same margin of 2em. Right now I am able to get the top (A), right (B), and left (D) to consistently retain a margin of 2em; however, the bottom dimension of the modal window conforms to the size of whatever content is in the modal window. For example, my About page content is much more than my Contact page content. In effect, About pushes the modal window down further, whereas the Contact modal window has a smaller height.

    I hope you understand my explanation. Please let me know if you need further information or code (HTML, CSS, etc.)


    # June 15, 2009 at 6:42 pm


    Setting a height for example: height: 500px; for the modal window wont exactly fulfill my request as I am trying to achieve a 2em margin between the modal window and the bottom of the browser window…?

    # June 16, 2009 at 9:08 am

    Really? Nobody has any ideas on how I can achieve this?

    # June 16, 2009 at 9:27 am

    Sounds like you need to not use height and width with margins, but use Top, Bottom, Left and Right values.

    # June 16, 2009 at 9:43 am

    What might something like this look like?

    Should the #container that has content loaded into it be the one that gets the top, right, bottom, and left values of 2em?

    # June 16, 2009 at 9:18 pm

    Got it working… I put the 2.6em value on top, right, bottom, and left. I set position to fixed. I did this on the <div> that contains the content

    Do I need to duplicate and/or use any other CSS on the container I am loading the content into?

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed