如何修复 AlloyUI 模态始终显示在图表画布下方？答案

【问题标题】：How to fix AlloyUI modal always showing up below diagram canvas?如何修复 AlloyUI 模态始终显示在图表画布下方？
【发布时间】：2013-07-12 17:05:32
【问题描述】：

我正在尝试像这样一起使用 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)

【问题讨论】：

标签： javascript css yui alloy-ui

【解决方案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();

【讨论】：