Несколько модалов с семантическим UI

Question

Возможно ли иметь несколько модалов с использованием семантического интерфейса?

Причина, по которой я спрашиваю, в настоящее время у меня есть три модальности на моей странице, в соответствии с приведенным ниже кодом. Как вы можете видеть, первая стандартная модальная, а две другие - малые модальности.

Первый и второй модальные индикаторы отображаются правильно, когда вызывается их поведение .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