How to get AlloyUI modal body to render properly when initialized as visible: false?

Question

I'm using the AlloyUI modal "Real World Example" directly from their website at: http://alloyui.com/examples/modal/real-world/

Using the example verbatim and changing the following line from:

   visible: true,

to

   visible: false,

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.

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.

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?

Answer 1

After some research I found an answer to my own question, this still may be a hacky fix but until someone comes up with something better here is the solution.

 Step 1: 
 Leave visible: true intact.

 Step 2: 
 Invoke .hide() after setting up the modal

The complete code.

YUI().use('aui-modal', function(Y) {
    var modal = new Y.Modal({
        bodyContent: '<div id="dialogBody"><div id="myTab"></div></div>',
        centered: true,
        headerContent: '<h3>Modal Goodness</h3>',
        height: 600,
        modal: true,
        render: '#modal',
        width: 900
    }).render();

    modal.addToolbar([
        {
          label: 'Save',
          on: {
            click: function() {
              alert('You clicked save!');
            }
          }
        },
        {
          label: 'Close',
          on: {
            click: function() {
              modal.hide();
            }
          }
        }
    ]);

    modal.hide();

    Y.one('#showModal').on(
        'click',
        function() {
            modal.show();
        }
    );
});

Answer 2

I've done it nearly as you, just a little difference

                  modal = new Y.Modal(
                  {
                    centered: true,
                    contentBox: '#contentBox',
                    destroyOnHide: false,
                    headerContent: '<h3>Informations to your Orders</h3>',
                    height: 400,
                    modal: true,
                    render: '#modal',
                    resizable: {
                      handles: 'b, r'
                    },
                    visible: true,
                    width: 450
                  }
                ).hide();

I replaced .render() with hide(), by clicking a button this lines of codes are called:

                Y.all('#showModal').on(
                  'click',
                  function() {
                    modal.show();
                  }
                );

Can't find a method or parameter on YUI API Docs to stop auto render, so that seems to be the 'usual' way. I thought it might be the attribute render, but setting it to false or deleting the attribute don't make any changes to the auto init behaviour.