具有語義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