[Solved] Container Modal Window Dimensions

[Eraser35]

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

[img]https://files.getdropbox.com/u/9191/ajaxwindow.png[/img]

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.)

Regards.

[Eraser35]

Anyone?

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…?

[Eraser35]

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

[Chris Coyier]

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

[Eraser35]

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?

[Eraser35]

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?

[Author]

Posts