Question

我的语义用户界面存在问题。我试图使用多个模态，但是在按下第一个模态上的“批准”按钮时，第二个模式会闪烁一小段时间，然后它们都会关闭（在Firefox和Chrome中测试）。我不确定我做错了什么。

我的代码：

<body>
    <div class="ui coupled first modal">
      <div class="header">Header 1</div>
      <div class="actions">
        <div class="ui approve button">Approve</div>
      </div>
    </div>
    <div class="ui coupled second modal">
      <div class="header">Header 2</div>
    </div>

    <script>
        $('.coupled.modal').modal({
            allowMultiple: true
        });

        $('.second.modal').modal('attach events', '.first.modal .button');

        $('.first.modal').modal({
            transition: 'fade up'
        }).modal('show');
    </script>
</body>

这是我的JSFiddle http://jsfiddle.net/tm95bwpf/

Answer 1

更改

<div class="ui approve button">Approve</div>

到

<div class="ui primary button">Approve</div>

解决了这个问题。

Answer 2

From the documentation on modal settings

默认情况下，关闭操作将应用于所有按钮操作   此外，如果元素将触发onApprove或onDeny回调   匹配选择器。

批准：'。positiveive，.approve，.ok'，deny：'。angative，.deny，   .cancel'

当你“批准”作为你的班级时，它会导致模态关闭，因为它会触发onApprove事件。

语义UI耦合模态不起作用

2 个答案: