初始化为可见时，如何使AlloyUI模态主体正确呈现：false？

Question

我直接从他们的网站（网址为http://alloyui.com/examples/modal/real-world/）使用AlloyUI模态“真实世界示例”

使用逐字显示示例，并将以下行更改为：

   visible: true,

至

   visible: false,

这样模态仅在单击按钮后才出现，而不是在页面加载时出现，就像人们期望对话框那样。 当我单击按钮以“显示模态”时，模态加载，但是对话框的主体无法正确填充其空间，工具栏也紧贴在它上面。 调整大小后，所有内容都会很好地跳回原位。

我正在寻找一个干净的修复程序，到目前为止，我认为一个有问题的修复程序可能是使用zIndex加载模式并将其放在页面主体后面，然后通过单击按钮通过CSS更改z-index（但这似乎确实是的hackish）。 在按钮触发modal.show（）之后，我也可能会以编程方式调整模式的大小，但这会导致布局出现可见的跳跃，我想避免这种跳跃。

有什么建议么？ 我知道AlloyUI有很多隐藏的东西，因为它们的文档稀疏，也许可见属性不是我应该使用的属性？

Answer 1

经过研究，我找到了自己的问题的答案，这可能仍然是个错误的解决方案，但是直到有人提出更好的解决方案为止。

 Step 1: 
 Leave visible: true intact.

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

完整的代码。

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

我几乎和你一样做了，只是有一点点不同

                  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();

通过单击按钮，我用hide（）替换了.render（），这行代码称为：

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

在YUI API文档上找不到方法或参数来停止自动渲染，因此这似乎是“通常”的方式。 我认为这可能是属性render ，但是将其设置为false或删除属性不会对自动初始化行为做出任何更改。