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