Question

这有效，但不是第二次。正如您所看到的，模态的代码在第一次打开时会移动到body标记的末尾。

我需要列出一个页面上的几个项目，每个项目都有自己的模态，所以我怎样才能让它工作？

Answer 1

默认情况下，模态移动到可调光区域之外。您必须将可分离设置为 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模式仅在段内打开一次

1 个答案: