语义UI模式onShow / onVisible不起作用?

时间:2016-08-19 19:11:51

标签: javascript jquery frontend semantic-ui

另一个语义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>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:3)

您应该在同一个onVisible来电中指定onApprove.modal()个回调:

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

这里是fiddle