Javascript 如何使AlloyUI模态体在初始化为可见时正确渲染：false？

我直接从他们的网站上使用AlloyUI模式“真实世界示例”：

使用示例逐字记录并将以下行更改为：

   visible: true,

到

因此，模态仅在单击按钮后出现，而不是在页面加载时出现，就像人们期望的对话框那样。当我点击按钮“显示模态”时，模态会加载，但是对话框的主体并没有正确地填充它的空间，工具栏也会与之混合。调整大小后，所有内容都很好地跳回原位

我正在寻找一个干净的修复，到目前为止，我认为一个黑客修复可能是加载一个zIndex将其放在页面主体后面的模态，并通过CSS通过点击按钮改变z索引（但这似乎真的很黑客）。在按钮触发modal.show（）之后，我可能还可以通过编程方式调整modal的大小，但这会导致布局中出现我希望避免的可见跳转

---

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

经过一些研究，我找到了我自己问题的答案，这可能仍然是一个黑客补丁，但除非有人想出更好的解决方案

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

YUI（）。使用（'aui-modal'，函数（Y）{
var模态=新的Y.模态({
正文内容：“”，
对,，
标题内容：“模态善”，
身高：600，
莫代尔：是的，
呈现：“#模态”，
宽度：900
}).render（）；
modal.addToolbar([
{
标签：“保存”，
关于：{
单击：函数（）{
警报（“您单击了保存！”）；
}
}
},
{
标签：“关闭”，
关于：{
单击：函数（）{
modal.hide（）；
}
}
}
]);
modal.hide（）；
Y.one（“#showModal”）。在(
“点击”，
函数（）{
modal.show（）；
}
);
});

我做的和你差不多，只是有点不同

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

无法在上找到停止自动渲染的方法或参数，因此这似乎是“常用”方式。我认为它可能是属性，但将其设置为false或删除属性不会对auto init行为进行任何更改

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

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