I am using jqModal to create modal popups using absolutely positioned ["floating"] divs. These popups often contain interactive forms with dynamic content that is shown/hidden based on user input. I would like these popup divs to dynamically resize themselves to accommodate changes to their content: if elements are shown, then the popup div should grow; if elements are hidden, the popup div should shrink.
Can anyone suggest a framework, library or example that makes it easy to create divs with these properties:
Default size depends on the content it wraps
The initial size of the popup div should be determined according to its contents.
- Max width: the popup div should have a max width that reserves a 25px horizontal margin
- Max height: the popup div should have a max height that reserves a 25px vertical margin
Fluidly centered on screen
The popup div is centered [vertically and horizontally] on the screen and "fluidly" recenters if the browser window is resized.
Automatically resizes, up to specified max width and height, when content changes
When the contents of the popup div change (i.e. elements are shown/hidden), the div should adjust accordingly:
- If the div can extend right or down without violating the 25px margin, then resize without recentering. This avoids an unnecessary content shift.
- If the div cannot grow without violating the 25px margin, then resize and recenter.
- If the div cannot be resized without violating the margins, add scrollbars to the div.
"Floating" on page [e.g. fixed in place]
The popup div should be fixed in place on the screen, it should not move as the main page content is scrolled up or down. (e.g. absolute positioning that dynamically adjusts to keep the content centered)
I'm fairly proficient with CSS but there are a lot of moving parts here. A complete solution would be awesome, but I'd be equally happy with pointers in the right direction.