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

【问题标题】：How to get AlloyUI modal body to render properly when initialized as visible: false?初始化为可见时如何使AlloyUI模态体正确呈现：false？
【发布时间】：2014-07-24 15:45:33
【问题描述】：

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

逐字使用示例并更改以下行：

   visible: true,

到

   visible: false,

这样模态框只会在单击按钮后出现，而不是在页面加载时出现，就像人们期望的对话框那样。当我单击“显示模式”按钮时，模式会加载，但是对话框的主体没有正确填充它的空间，并且工具栏被混搭在它上面。调整大小后，一切都很好地跳回原位。

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

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

【问题讨论】：

标签： javascript css modal-dialog alloy-ui

【解决方案1】：

经过一些研究，我找到了自己问题的答案，这仍然可能是一个 hacky 修复，但直到有人想出更好的解决方案。

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

【讨论】：

【解决方案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 Docs 上找不到停止自动渲染的方法或参数，所以这似乎是“通常”的方式。我认为它可能是属性render，但将其设置为 false 或删除属性不会对自动初始化行为进行任何更改。

【讨论】：