javascript - 语义 UI 模态 onShow/onVisible 不工作？

Question

另一个语义 UI 模态问题，因为它涉及在显示模态后调整嵌入式谷歌地图的大小。经过几次尝试后，我将问题简化为在显示或可见的模态上获取回调。

但运气不好。 onShow 或 onVisible 总是灰色的。这是片段:

 $('.ui.modal')
     .modal({
         onVisible: function() {
             console.log("hahaha");
         }
     }).modal({
         onApprove: function() {
             console.log("hehehe");
         }
     }).modal('attach events', '#btn-show');

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.css" rel="stylesheet"/>
<!--Load  JS libaries; Order is important and Load Jquery first -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.js"></script>


<button class="ui button" id="btn-show">
    Show modal
</button>

<div class="ui modal">
    <!--<i class="close icon"></i>-->
    <div class="header">
        Mark your project on the map
    </div>
    <div class="content">
        <p>Content</p>
        <div class="actions" style="text-align: right">
            <div class="ui deny button" id="btn-close-modal-1">
                Cancel
            </div>
            <div class="ui approve orange right labeled icon button" id="btn-open-modal-2">
                Next
                <i class="chevron right icon"></i>
            </div>
        </div>
    </div>
</div>

Answer 1

您应该在同一个 .modal() 调用中指定 onVisible 和 onApprove 回调:

 $('.ui.modal').modal({
    onVisible: function () {
      console.log('visible');
    },
    onApprove: function () {
      console.log('approved');
    }
  }).modal('attach events', '#btn-show');

这是一个 fiddle