具有语义 UI 的多模态

Question

是否可以使用 Semantic UI 拥有多个模式？

我问的原因是，根据下面的代码，我的页面上目前有三个模式。如您所见，第一个是标准模态，另外两个是小型模态。

当调用 .modal('show') 行为时，第一个和第二个模态都正确显示。第三个将仅在调用其 .modal('show') 行为之后显示其他一个时才会显示。

为了更清楚一点，为了显示警报模式，我必须这样做：

$('#mdlAlert').modal('show');
$('#schInfoMdl').modal('show');

此时，两种模式都将出现在屏幕上，警报模式位于 schInfo 模式的前面。

有没有办法让多个模态在同一个页面上没有任何问题？

<!--Information Modal -->
<div class="ui modal" id="schInfoMdl">
 <div class="header">
  Information
 </div>
 <div class="content">
  Some info will go here...
 </div>
 <div class="actions">
  <div class="ui blue labeled icon button">
   <i class="arrow sign left icon"></i>
   Back
  </div>
 </div>
</div>

<!-- Service Cancel Modal -->
<div class="ui small modal" id="schCancelMdl">
 <div class="header">
  Cancel Service Call
 </div>
 <div class="content">
  Are you sure you want to cancel this service call?
  <input type="hidden" id="schCnclId"/>
 </div>
 <div class="actions">
  <div class="ui blue labeled icon button">
   <i class="arrow sign left icon"></i>
   Back
  </div>
  <a class="ui red labeled icon button schCnclMdlBtn">
   <i class="remove icon"></i>
   Cancel Call
  </a>
 </div>
</div>

<!-- Alerts Modal -->
<div class="ui small modal" id="mdlAlert">
 <div class="header">
  Alert
 </div>
 <div class="content" id="mdlAlertMsg">
 </div>
 <div class="actions">
  <div class="ui blue labeled icon button">
   <i class="checkmark icon"></i>
   Okay
  </div>
 </div>
</div>

Answer 1

我希望我的要点对你有所帮助。调用了 3 个模态，但仍将调用第 4 个模态。

Creating Multiple Modals in Semantic UI - https://gist.github.com/marcosfreitas/53a6c6a891aa5441d938