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

Question

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

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

Answer 1

给你#newMetadataPanelContent元素CSS属性display:none。当你展示你的面板时，Y.Panel将会隐藏它。