Question

在Alloy UI版本中是2.0。是否有任何方法可以在按下esc键时阻止关闭对话框？

Answer 1

执行此操作的一种方法是收听ESC按键并阻止对话框隐藏：

Y.one('body').on('key', function(event) {
    modal.once('visibleChange', function(event) {
        if (event.prevVal === true) {
            event.newVal = true;
        }
    });
}, 'esc');

上面的代码将一次visibleChange监听器附加到模态，确保在按下ESC后它将保持可见。否则，可以正常隐藏对话框。

如果用户按下ESC并立即按下 X 按钮，这可能会产生竞争条件。我不确定在这种情况下对话框是否会关闭，但风险似乎很低。

可运行的示例：

＆＃13;

YUI().use('aui-modal', function(Y) {

  var modal = new Y.Modal({
    bodyContent: 'Modal body',
    centered: true,
    headerContent: '<h3>Modal header</h3>',
    modal: true,
    render: '#modal',
    width: 450
  }).render();

  Y.one('body').on('key', function(event) {
    modal.once('visibleChange', function(event) {
      if (event.prevVal === true) {
        event.newVal = true;
      }
    });
  }, 'esc');
});

＆＃13;

<script src="https://cdn.rawgit.com/stiemannkj1/701826667a70997013605edcd37e92a6/raw/469fe1ae297e72a5a80eb9015003b7b04eac735e/alloy-ui-3.0.1_aui_aui-min.js"></script>
<link href="https://cdn.rawgit.com/stiemannkj1/90be22de7f48c729b443af14796d91d3/raw/a9f35ceedfac7fc0559b121bed105eaf80f10bf2/aui-css_css_bootstrap.min.css" rel="stylesheet"></link>
<div class="yui3-skin-sam">
  <div id="modal"></div>
</div>

＆＃13;

禁用esc键按下aui对话框

1 个答案: