Semantic UI Modal onShow / onVisible not working?

Question

Another Semantic UI modal question as it relates to resizing an embedded google map after modal is shown. After several try I simplified the problem into getting callbacks on modal being shown or visible.

But no luck. onShow or onVisible is always greyed out. Here is the snippet:

 $('.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

You should specify onVisible and onApprove callbacks in the same .modal() call:

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

Here's a fiddle