CODEWITHSUNDEEP
jquerymodal-dialogsemantic-uijquery-events
grovduck
grovduck

Reputation: 416

Semantic UI modal updated settings not triggered on 'hide'

I can correctly create a semantic-ui modal element and change the default settings for transition and duration on page load. But when I try to modify these settings to hide the modal through onApprove, it still uses the same settings that were used with the initial show. Here's the relevant JS:

$(document).ready(function() {
  $('#test').modal({
    transition: 'horizontal flip',
    duration: 2000,
    onApprove: function() {
      $('#test').modal({
        transition: 'fade',
        duration: 10000
      }).modal('hide');
    }
  }).modal('show');
});

Here is a JSFiddle that demonstrates the issue. Clicking the 'OK' button should trigger a fade lasting 10 seconds. The strange thing is I can put a breakpoint in the code after triggering the onApprove and see that the settings did indeed get updated to correct values (eg. in semantic.js, line 9001) and the transition runs correctly when I hit 'resume' (Chrome 51.0.2704.103, Windows).

Not sure what I'm doing wrong here ...

Upvotes: 1

Views: 2602

Answers (1)

Albert Israel
Albert Israel

Reputation: 585

Alternatively, you may apply the new modal setting immediately after the modal is shown in the screen. Like: 

$(document).ready(function() {
  $('#test').modal({
    transition: 'horizontal flip',
    duration: 2000,
    onShow: function() {
      $('#test').modal({
        transition: 'fade',
        duration: 10000
      })
    },
    onApprove: function(){
        $('#test').modal('hide');
    }
  }).modal('show');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.js"></script>
<body>
  <div id='test' class='ui large modal'>
    <div class="header">
      Header
    </div>
    <div class="content">
      This is the content
    </div>
    <div class="actions">
      <div class="ui ok green basic button">
        OK
      </div>
    </div>
  </div>
</body>

Upvotes: 4

Related Questions