Question

我通过在配置中设置工具栏：false来渲染Aui对话框，以禁用Aui对话框一角的关闭按钮（X）。

如何在渲染的aui对话框中启用工具栏。即在检查某些条件后我想要显示（X）关闭图标。

Answer 1

我认为只需隐藏和显示工具栏即可。您可以隐藏和显示模式的工具栏，如下所示：

modal.getToolbar(Y.WidgetStdMod.HEADER).hide();
modal.getToolbar(Y.WidgetStdMod.HEADER).show();

为了满足您的使用案例，您应隐藏工具栏，显示模态，然后在满足条件时显示工具栏：

modal.getToolbar(Y.WidgetStdMod.HEADER).hide();
modal.show();

// Once your condition is met:
modal.getToolbar(Y.WidgetStdMod.HEADER).show();

如果您需要更多信息，请查看Toolbar API Docs。

使用Modal.getToolbar()时，您还可以选择HEADER工具栏以外的其他工具栏。查看the list of the other toolbar sections了解详情。

这是一个可运行的例子：

YUI().use('aui-modal', function(Y) {
  var modal = new Y.Modal({
    bodyContent: 'Modal body',
    headerContent: '<h3>Modal header</h3>',
    modal: false,
    render: '#modal',
    width: 450,
    visible: false
  }).render();

  modal.getToolbar(Y.WidgetStdMod.HEADER).hide();
  modal.show();

  Y.one('#button').on('click', function(event) {

    modal.getToolbar(Y.WidgetStdMod.HEADER).enable();
    modal.getToolbar(Y.WidgetStdMod.HEADER).show();
  });
});

<script src="http://cdn.alloyui.com/3.0.1/aui/aui-min.js"></script>
<link href="http://cdn.alloyui.com/3.0.1/aui-css/css/bootstrap.min.css" rel="stylesheet"></link>
<div class="yui3-skin-sam">
  <button id="button">Show Toolbar</button>
  <div id="modal"></div>
</div>

注意：隐藏工具栏不会禁用它，因此如果您需要确保用户无法访问工具栏，则需要拨打Toolbar.disable() 并您需要以编程方式禁用工具栏中的所有输入和按钮。

如何在渲染的aui对话框中启用工具栏

1 个答案: