inline popup tests

inline popup tests

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.10/semantic.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.10/semantic.min.js"></script>
<ul>
<li>Press the show popup button, then hide popup button. Popup contents remain on page. <b>preserve: false</b> is ignored</li>
<li>Press the show popup button, then <b>remove, destroy or hide button</b>. Popup contents remain on page.</li>
<li>Comment out the <b>inline:true</b> and try above actions again.</li>
</ul>
<div class="ui form">
  <div class="field">
      <label>First Name</label>
      <input type="text" name="firstname" value="" class="firstname">
  </div>
  <div class="field">
      <label>Last Name</label>
      <input type="text" name="lastname" value="" class="lastname">
  </div>
  <button type="button" class="ui primary button show">show popup</button>
  <button type="button" class="ui button destroy">destroy popup</button>
  <button type="button" class="ui button remove">remove popup</button>
  <button type="button" class="ui button hide">hide popup</button>
</div>

CSS

body {
  margin: 10px;
}

JavaScript

//$.fn.dropdown.settings.forceSelection = false;


$('.ui.button.show').on('click', function(){ 

$('.lastname').popup({
  on : 'manual',
  inline: false,
  title : 'Hello World',
  preserve: false,
  content : 'This is my inline popup'
}).popup('show');

});

$('.ui.button.remove').on('click', function(){ 
$('.lastname').popup('remove popup');
});
$('.ui.button.destroy').on('click', function(){ 
$('.lastname').popup('destroy');
});
$('.ui.button.hide').on('click', function(){ 
$('.lastname').popup('hide');
});