CODEWITHSUNDEEP
jquerysemantic-ui
charlycou
charlycou

Reputation: 1988

Semantic UI popup is only hidden once

I try to show a popup on click event for a given duration before to hide it. This work fine only once. When I click a second time I got this unexpected behaviour, the popup does not hide anymore. Any idea?

function myFunction() {
  $('.button').popup({
    on: 'manual',
    inline: true
  }).popup('show').delay(500).queue(() => {
    $('.button').popup("hide")
  })
}
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/semantic.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/semantic.min.js"></script>

<div id="smile" class="ui button" onclick="myFunction()">Click me first</div>
<div class="ui popup">You can see this disappear only once</div>

Upvotes: 2

Views: 173

Answers (1)

charlycou
charlycou

Reputation: 1988

One solution is to use setTimeout

function myFunction() {
  $('.button').popup({
    on: 'manual',
    inline: true
  }).popup('show')
  setTimeout(function() {
    $('.button').popup("hide")
  }, 1000);
}
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/semantic.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/semantic.min.js"></script>

<div id="smile" class="ui button" onclick="myFunction()">Click me first</div>
<div class="ui popup">You can see this disappear everytime</div>

Upvotes: 1

Related Questions