语义 UI 模态仅在段内打开一次

Question

这一次有效，但第二次无效。如您所见，模态框的代码在第一次打开时移至 body 标记的末尾。

我需要在一个页面上列出几个项目，每个项目都有自己的模态，那么我该如何让它工作？

Answer 1

默认情况下，模态框会移到可调光区域之外。您必须将 detachable 设置设置为 false 以避免它。在您的代码上试试这个：

$(".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>

语义 UI 模态仅在段内打开一次

Semantic UI Modal only opens once inside segment

jquery

semantic-ui