如何解决AlloyUI模式总是出现在图画布下方？

Question

我试图使用AlloyUI图和模态在一起，就像这样：

var Y = YUI().use(
    'aui-diagram-builder', 
    'aui-button', 
    'aui-modal', 
function (Y) { 
    var availableFields = [{ 
     iconClass: 'aui-diagram-node-start-icon', 
     label: 'Start', 
     type: 'start' 
    }, { 
     iconClass: 'aui-diagram-node-task-icon', 
     label: 'Task', 
     type: 'task' 
    }]; 

    var diagram = new Y.DiagramBuilder({ 
     availableFields: availableFields, 
     boundingBox: '#myDiagramContainer', 
     srcNode: '#myDiagramBuilder' 
    }).render(); 

    var modal = new Y.Modal({ 
     bodyContent: 'Modal body', 
     centered: true, 
     headerContent: '<h3>Modal header</h3>', 
     modal: true, 
     render: '#modal', 
     width: 450 
    }).render(); 

    .. 
}); 

但语气总是显露出了下面的图中，无论我的Z值的设定什么样的价值。 HTML文件的结构如下：

<div id="myDiagramContainer"> 
    <div id="myDiagramBuilder"></div> 
</div> 

<button id="showModal" class="aui-btn">Show Modal</button> 
<div class="yui3-skin-sam"> 
    <div id="modal"></div> 
</div> 

我错过了什么？

（jsfiddle here）

Answer 1

我在css文件z-index属性玩，但我没能解决问题。今天我在js中发现了一个zIndex属性，它似乎可以胜任这个工作：

var modal = new Y.Modal({ 
     bodyContent: 'Modal body', 
     centered: true, 
     headerContent: '<h3>Modal header</h3>', 
     modal: true, 
     render: '#modal', 
     zIndex: 1100, 
     width: 450 
    }).render();