未在 'hide' 上触发语义 UI 模态更新设置

Question

我可以正确地创建语义-ui 模态元素并在页面加载时更改 transition 和 duration 的默认设置。但是当我尝试修改这些设置以通过 onApprove 隐藏模式时，它仍然使用与初始显示相同的设置。这是相关的 JS:

$(document).ready(function() {
  $('#test').modal({
    transition: 'horizontal flip',
    duration: 2000,
    onApprove: function() {
      $('#test').modal({
        transition: 'fade',
        duration: 10000
      }).modal('hide');
    }
  }).modal('show');
});

这里有一个 JSFiddle 演示了这个问题。单击 'OK' 按钮应触发持续 10 秒的淡入淡出。奇怪的是，我可以在触发 onApprove 后在代码中放置一个断点，然后看到设置确实更新为正确的值（例如，在 semantic.js 中，第 9001 行）并且转换运行正确当我点击 'resume' (Chrome 51.0.2704.103, Windows).

不确定我在这里做错了什么...

Answer 1

或者，您可以在屏幕上显示模态后立即应用新的模态设置。像：

$(document).ready(function() {
  $('#test').modal({
    transition: 'horizontal flip',
    duration: 2000,
    onShow: function() {
      $('#test').modal({
        transition: 'fade',
        duration: 10000
      })
    },
    onApprove: function(){
        $('#test').modal('hide');
    }
  }).modal('show');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.js"></script>
<body>
  <div id='test' class='ui large modal'>
    <div class="header">
      Header
    </div>
    <div class="content">
      This is the content
    </div>
    <div class="actions">
      <div class="ui ok green basic button">
        OK
      </div>
    </div>
  </div>
</body>

未在 'hide' 上触发语义 UI 模态更新设置

Semantic UI modal updated settings not triggered on 'hide'

jquery

modal-dialog

semantic-ui

jquery-events