另一个语义UI模态问题,与显示模态后调整嵌入式Google地图大小有关.经过几次尝试,我将问题简化为获取显示或可见的模式回调.

但是没有运气. 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>

解决方法:

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

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

这是一个fiddle