語義UI模式onShow/onVisible無法正常工作？

Question

另一個語義用戶界面模式問題，因爲它涉及調整模式後嵌入谷歌地圖的大小顯示。經過幾次嘗試之後，我簡化了問題，讓模態顯示或可見回調。

但沒有運氣。 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