내가 말하기 전에 패널 렌더링이 왜입니까?

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이 숨기기를 취소합니다.