初始化為可見時，如何使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或刪除屬性不會對自動初始化行為做出任何更改。