Javascript 为什么我的面板在我告诉它之前要进行渲染？

当此代码运行时，页面加载后，面板立即出现在屏幕底部。它甚至没有居中。不应该render:false阻止它被添加到DOM，visible:false阻止它被显示？

为您提供新的MetadataPanelContent元素CSS属性display:none。Y.显示面板时，面板将取消隐藏

YUI().use('node-event-delegate', 'panel', function(Y){

  (function createNewMetadataPanel() {
    console.log('creating');
    var panelContent = Y.Node.create('<div/>').set('id', 'newMetadataPanelContent');
    var widget = Y.Node.create('<div/>').addClass('yui3-widget-bd');
    var form = Y.Node.create('<form/>');
    var set = Y.Node.create('<fieldset/>');

    form.append(set);
    widget.append(form);
    panelContent.append(widget);

    var metaDataName = Y.Node.create('<input type="text"name="metadataName"id="metadataName"placeholder="Please enter a new metadata field">');
    var metaDataValue = Y.Node.create('<input type="text"name="metadataValue"id="metadataValue"placeholder="Please enter a new metadata value">');
    set.append(metaDataName);
    set.append(metaDataValue);

    panel2 = new Y.Panel({
        srcNode      : '#newMetadataPanelContent',
        headerContent: 'Add A New Member',
        width        : 250,
        zIndex       : 5,
        centered     : true,
        modal        : true,
        visible      : false,
        render       : false
  });

  panel2.addButton({
    value:   'Create Member',
    section: Y.WidgetStdMod.FOOTER,
    action : function (e) {
        e.preventDefault();
        addMetaData();
    }
  });
});