Sarke Sarke - 4 months ago 46
jQuery Question

Semantic UI Modal only opens once inside segment

This works once, but not the second time. As you can see, the code for the modal gets moved to the end of the

body
tag when it's opened the first time.

I need to list several items on a page, each with their own modal, so how can I get this to work?

https://jsfiddle.net/mw60egz9/1/

Answer

By default, modals are moved outside the dimmable area. You must set detachable setting to false to avoid it. Try this on your code:

$(".ui.button").click(function() {
    var $segment = $(this).parent(".ui.segment").find(".ui.modal");
    $segment.modal({
          detachable: false
    }).modal("show");
});

$(".ui.button").click(function() {
	var $segment = $(this).parent(".ui.segment").find(".ui.modal");
	$segment.modal({
  	  detachable: false
    }).modal("show");
});
<script src="https://raw.githubusercontent.com/jquery/jquery-ui/master/external/jquery-2.2.0/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.css" rel="stylesheet"/>
<div class="ui segment">

  <button class="ui button">Show</button>
  
  <div class="ui modal">
    <i class="close icon"></i>
    <div class="content">
      <div class="description">
        <p>
           Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur, repudiandae, culpa unde saepe dicta numquam ipsum at iusto voluptatibus corrupti laborum qui expedita impedit iste enim facere voluptatum molestias libero?
        </p>
      </div>
    </div>
  </div>
</div>