Как исправить модальное окно AlloyUI, которое всегда отображается под холстом диаграммы?

Я пытаюсь использовать диаграмму 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 здесь)


javascript css yui alloy-ui
person none    schedule 12.07.2013    source источник

Ответы (1)


arrow_upward
9
arrow_downward

Я играл с атрибутами 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();
person none    schedule 13.07.2013