Как исправить 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(); 

    .. 
}); 

но модальный не всегда появляется ниже диаграммы, независимо от того, какое значение я устанавливаю для г-значение х. 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

Я играл с z-index атрибутов в CSS-файлов, но я не смог решить эту проблему. Сегодня я нашел атрибут zIndex для модалов в js, который, похоже, делает это задание:

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