Question

是否可以使用语义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

具有语义UI的多个模态

1 个答案: