具有语义UI的多种模式

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