Semantic UI sandbox

by Banandrew

HTML

<link rel="stylesheet" href="https://semantic-ui.com/dist/semantic.css">
<script src="https://semantic-ui.com/dist/semantic.js"></script>
<div class="ui segment">
  <h2 class="ui header">
      Fork this JSFiddle 
      <div class="sub header">By hitting the button in the menu above</div>
  </h2>
</div>
<div class="ui test page dimmer"></div>
<div class="ui test2 page dimmer"></div>

CSS

body {
    padding: 1em;
}

JavaScript

$('.test')
  .dimmer('show')
  
$('.test2')
  .dimmer('show')
  
window.setTimeout(() => {
	$('.test2')
  	.dimmer('hide')
    
  $('body')
  	.addClass('dimmed')
}, 2000)

window.setTimeout(() => {
	$('.test')
  	.dimmer('hide')
}, 4000)


/*

I think I reproduced it with 2 .page dimmers. When the component hides the first dimmer, it removes the .dimmed class from the body, which messes up with the second dimmer, but returning .dimmed to the body after the first dimmer is hidden fixes it—I don’t think the issue’s salient, but we should be tracking it; I’ll see if it’s possible to do a quick patch as soon as I can.

*/