[英]How to fix AlloyUI modal always showing up below diagram canvas?
I'm trying to use AlloyUI diagram and modal together like so: 我试图像这样使用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();
..
});
but modal is always showing up below the diagram no matter what value I set for z-value's. 但是无论我为z值设置什么值,模态总是出现在图表下方。 HTML file is structured as such: 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>
What am I missing? 我错过了什么?
( jsfiddle here ) ( 这里是jsfiddle )
I was playing with z-index
attributes in css files but I wasn't able to fix the problem. 我在css文件中使用z-index
属性,但我无法解决问题。 Today I found a zIndex
attribute for modals in js which seems to do the job: 今天我发现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();
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.