Flexible width centered modal windows

Question

Does anyone know of a way to have a modal window pop-up that can have a flexible width (say % of the screen width) that is always centered, at least when it's invoked.

I am about to code this myself in js/jQuery (via a function that you can send min-width, percentage, and max width to), but it I'm wondering about pre-made solutions to avoid re-inventing the wheel (especially if they don't arrive with cumbersome frameworks).

Right now I'm using jqModal for the windows and I like it for its simplicity

Answer 1

Did you try jquery modal options

The width of the dialog, in pixels.

$( ".selector" ).dialog({ width: 460 });

http://jqueryui.com/demos/dialog/#option-width

Answer 2

Here's a method I devised to create fluid modals with all the features you described, and as a bonus, it doesn't even require any JavaScript in 95% of cases, just HTML and CSS! - http://www.backalleycoder.com/2011/11/16/best-damn-modal-method-period%E2%84%A2/ - below I have pasted the HTML and CSS it uses, the blog post contains a much longer, more detailed explanation and a live demo.

The HTML structure:

<table id="modal">
  <tbody id="modal-tbody">
    <tr id="modal-tr">
      <td id="modal-td">
        <div id="modal-content">
            <div id="modal-body">
               Some modalicious content here for your  viewing  pleasure!
            </div>
        </div>
      </td>
    </tr>
  </tbody>
</table>

The CSS you'll need:

html, body
{
    height: 100%; /* root and body MUST be height 100% */
}

#modal
{
    position: fixed;
    top: 0;
    left: -100%;
    height: 100%;
    width: 100%;
}

#modal-tbody, #modal-tr, #modal-td
{
    height: 100%; /* All table elements should be height 100% */
}

#modal-td
{
    vertical-align: middle;
}

#modal-content
{
    position: relative;
    left: 100%;
    height: auto; /* HEIGHT optional, any unit */
    width: 50%; /* WIDTH optional, any unit */
    max-height: 80%; /* MAX-HEIGHT optional, if height auto, must be % */
    min-height: 80px; /* MIN-HEIGHT optional, any unit */
    max-width: 225px; /* MAX-WIDTH optional, any unit */
    min-width: 80px; /* MIN-WIDTH optional, any unit */
    margin: 0 auto;
    border: 1px solid;
    background: #eaeaea;
    overflow: auto;
}