我直接从他们的网站使用 AlloyUI 模式“真实世界示例”:http://alloyui.com/examples/modal/real-world/
逐字使用示例并将以下行更改为:
visible: true,
到
visible: false,
这样,模式仅在单击按钮后出现,而不是在页面加载时出现,就像人们期望的对话框那样。当我单击按钮“显示模态”时,模态会加载,但是对话框的主体没有正确填充其空间,并且工具栏与它混在一起。调整大小后,一切都会很好地跳回原位。
我正在寻找一个干净的修复,到目前为止,我认为一个黑客修复可能是使用 zIndex 加载模式,将其放在页面主体后面,并通过单击按钮的 CSS 更改 z-index (但是这看起来真的很黑客)。我也可以在按钮触发 modal.show() 后以编程方式调整模态的大小,但这会导致布局中出现明显的跳转,我想避免这种情况。
有什么建议吗?我知道 AlloyUI 有大量隐藏的好东西,因为它们的文档很少,也许可见属性不是我应该使用的属性?
最佳答案
经过一些研究,我找到了自己问题的答案,这仍然可能是一个黑客修复,但直到有人想出更好的解决方案。
Step 1:
Leave visible: true intact.
Step 2:
Invoke .hide() after setting up the modal
完整代码。
YUI().use('aui-modal', function(Y) {
var modal = new Y.Modal({
bodyContent: '<div id="dialogBody"><div id="myTab"></div></div>',
centered: true,
headerContent: '<h3>Modal Goodness</h3>',
height: 600,
modal: true,
render: '#modal',
width: 900
}).render();
modal.addToolbar([
{
label: 'Save',
on: {
click: function() {
alert('You clicked save!');
}
}
},
{
label: 'Close',
on: {
click: function() {
modal.hide();
}
}
}
]);
modal.hide();
Y.one('#showModal').on(
'click',
function() {
modal.show();
}
);
});
关于javascript - 如何让 AlloyUI 模态主体在初始化为可见时正确渲染 : false?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19280390/