语义 UI 模式不是 onDeny/onApprove 事件未触发

Question

我在使用 SemanticUI 模态面板模块时遇到问题，我已经设置了所有内容，但我不知道我应该怎么做才能触发 onDeny/onApprove 事件。 onShow 和 onVisible 等其他事件可以正常触发，没有任何问题。此外，可关闭标志设置为 false，但我仍然看到关闭按钮。

我的 jquery 监听器是这样定义的：

$('#btnReset').click(function(){
  $('#confirmModalPanel')
    .modal({
        closable  : false,
        onShow: function(){console.log('onShow');},
        onVisible: function(){console.log('onVisible');},
        onDeny: function(){console.log('onDeny');},
        onApprove: function(){console.log('onApprove');}
    })
    .modal('show');
});

这是 jsfiddle link。

Answer 1

显示关闭按钮是因为您要在模态中添加 <i class="close icon"></i>，如果删除此元素，则不会显示关闭按钮。

closable 属性不会以您期望的方式产生影响，closable:false 使得在模态之外的任何地方单击都没有效果，因此模态不会隐藏，或者如果你设置 closable:true 然后点击你的模态会使模态隐藏。

关于触发 onDeny/onApprove 事件，您必须添加 ok class 批准 <div> 和 cancel class 拒绝 <div>。所以使用：

<div class="ui green ok basic inverted button"> // added "ok"
    <i class="checkmark icon"></i>
      DA
</div>
<div class="ui red cancel basic inverted button"> // addded "cancel"
   <i class="remove icon"></i>
      NE
</div>

而不是：

<div class="ui green basic inverted button"> // without "ok" onApprove doesn't fires
    <i class="checkmark icon"></i>
      DA
</div>
<div class="ui red cancel basic inverted button"> // without "cancel" onDeny doesn't fire
   <i class="remove icon"></i>
      NE
</div>

您还可以使用 positive/approve、negative/deny 作为 ok/cancel，正如您从 semantic-ui example:

中看到的那样

Modals will automatically tie approve deny callbacks to any positive/approve, negative/deny or ok/cancel buttons.

看到这个工作 jsfiddle

希望这对您有所帮助，

语义 UI 模式不是 onDeny/onApprove 事件未触发

SemanticUI modal not onDeny/onApprove events not firing

javascript

jquery

html

semantic-ui