title: How to get AlloyUI modal body to render properly when initialized as visible: false?
body: <p>I'm using the AlloyUI modal "Real World Example" directly from their website at: <a href="http://alloyui.com/examples/modal/real-world/" rel="nofollow">http://alloyui.com/examples/modal/real-world/</a></p>
  
  <p>Using the example verbatim and changing the following line from: </p>
  
  <pre><code>   visible: true,
  </code></pre>
  
  <p>to </p>
  
  <pre><code>   visible: false,
  </code></pre>
  
  <p>So that the modal appears only after clicking the button instead of when the page loads, as one would expect a dialog box to do. When I click the button to "show modal" the modal loads however the body of the dialog doesn't fill it's space properly, and the toolbar is mashed up against it. Upon resize everything jumps back into place nicely.</p>
  
  <p>I'm looking for a clean fix, so far I figure a hacky fix might be to load the modal with a zIndex that puts it behind the page body, and alter the z-index via CSS with the button click (but this seems really hackish). I could probably also programatically resize the modal after the button fires modal.show() but that would cause a visible jump in the layout which I would like to avoid.</p>
  
  <p>Any suggestions?  I know AlloyUI has tons of hidden goodies, as their documentation is sparse, perhaps the visible attribute is not the one I should be using?</p>