セマンティックUIモーダルonShow/onVisibleは機能しませんか？

Question

モーダルの後に埋め込まれたGoogleマップのサイズ変更に関するセマンティック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