how to re size the simple modal dialog

Question

I am trying to make the ericmmartin simplemodal dialog wider and taller. My requirement is that the dialog will display scroll bars if the content is long, which it does using the out of the box settings.

If I alter the css example given : #simplemodal-container {height:360px; width:600px; to say width:700px; the content just overflows the dialog downwards.

If I try setting the width in the on click call, as in Eric's examples: $("#sample").modal({ minHeight:400, minWidth: 600 });

(http://www.ericmmartin.com/projects/simplemodal/) nothing changes. Any ideas please? Ideally I wouls like the modal to always present a vertical scroll bar if the content is longer than say 500px.

Ken Palmer Ken Palmer · Accepted Answer · 2013-07-26T14:43:28

Style and size the modal container however you wish via a CSS. Then when you instantiate the modal dialog via jQuery, dynamically handle the size of the dialog using the 'auto' size options.

In my case, we have more than one modal dialog that can appear on the same page. Since the SimpleModal dialog will enclose the modal container, applying width and height to the simplemodal-container class in an across-the-board manner wasn't feasible.

This is sample markup I just worked on.

<div id="accountCanceled" class="simplemodal-container">
    <div id="cancelWrap" class="box">
        <!-- Modal dialog markup goes here, all styled by an external CSS. -->
    </div>
</div>

This is part of the CSS to set the width of the #cancelWrap div shown above.

#cancelWrap {
    width: 100%;
    max-width: 560px;
}

And here is the relevant jQuery.

  $canceledAlert = $('#accountCanceled');
  $canceledAlert.modal(
     {  containerCss: {
           height: 'auto',
           width: 'auto',
        }
     }
  );

Remember to enclose the 'auto' settings in quotes.

When this SimpleModal dialog is displayed, it's container will dynamically resize to the fit the contents of the #cancelWrap div. Hope this helps someone.

how to re size the simple modal dialog

2 Answers