Semantic UI Modal onShow/onVisible не работает?

Question

Показывается другой вопрос о семантическом интерфейсе, связанный с изменением размера встроенной карты Google после модального отображения. После нескольких попыток я упростил проблему в получении обратных вызовов по модальному показанию или видимым.

Но не повезло. onShow или onVisible всегда greyed вне. Вот фрагмент кода:

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

Вы должны указать onVisible и onApprove обратные вызовы в том же .modal() вызова:

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

Вот fiddle