Is it possible to have multiple modals using Semantic UI?
The reason I ask is, I currently have three modals on my page, per the code below. As you can see, the first is a standard modal and the other two are small modals.
The first and second modal both display correctly when their .modal('show') behaviour is called. The third will only show if one of the others is shown after its .modal('show') behaviour is called.
To make that a little clearer, in order to have the alerts modal displayed, I would have to do this:
$('#mdlAlert').modal('show');
$('#schInfoMdl').modal('show');
At which point, both modals will appear on-screen, with the alerts modal in front of the schInfo modal.
Is there a way to have multiple modals on the same page without any problems?
<!--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>
