语义 UI 耦合模态不起作用

Question

我对语义有疑问 UI。我正在尝试使用多个模态框，但在第一个模态框上按下“批准”按钮后，第二个模态框会闪烁一小会儿，然后它们都会关闭（在 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

Close actions are applied by default to all button actions, in addition an onApprove or onDeny callback will fire if the elements match either selector.

approve : '.positive, .approve, .ok', deny : '.negative, .deny, .cancel'

当您将 'approve' 作为您的 class 时，它会导致模式关闭，因为它会触发 onApprove 事件。

语义 UI 耦合模态不起作用

Semantic UI coupled modals not working

javascript

jquery

semantic-ui