title: Multiple Modals with Semantic-UI
body: <p>Is it possible to have multiple modals using Semantic UI?</p>
  
  <p>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. </p>
  
  <p>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 <strong>after</strong> its .modal('show') behaviour is called. </p>
  
  <p>To make that a little clearer, in order to have the alerts modal displayed, I would have to do this:</p>
  
  <pre><code>$('#mdlAlert').modal('show');
  $('#schInfoMdl').modal('show');
  </code></pre>
  
  <p>At which point, both modals will appear on-screen, with the alerts modal in front of the schInfo modal.</p>
  
  <p>Is there a way to have multiple modals on the same page without any problems?</p>
  
  <pre><code>&lt;!--Information Modal --&gt;
  &lt;div class="ui modal" id="schInfoMdl"&gt;
   &lt;div class="header"&gt;
    Information
   &lt;/div&gt;
   &lt;div class="content"&gt;
    Some info will go here...
   &lt;/div&gt;
   &lt;div class="actions"&gt;
    &lt;div class="ui blue labeled icon button"&gt;
     &lt;i class="arrow sign left icon"&gt;&lt;/i&gt;
     Back
    &lt;/div&gt;
   &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;!-- Service Cancel Modal --&gt;
  &lt;div class="ui small modal" id="schCancelMdl"&gt;
   &lt;div class="header"&gt;
    Cancel Service Call
   &lt;/div&gt;
   &lt;div class="content"&gt;
    Are you sure you want to cancel this service call?
    &lt;input type="hidden" id="schCnclId"/&gt;
   &lt;/div&gt;
   &lt;div class="actions"&gt;
    &lt;div class="ui blue labeled icon button"&gt;
     &lt;i class="arrow sign left icon"&gt;&lt;/i&gt;
     Back
    &lt;/div&gt;
    &lt;a class="ui red labeled icon button schCnclMdlBtn"&gt;
     &lt;i class="remove icon"&gt;&lt;/i&gt;
     Cancel Call
    &lt;/a&gt;
   &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;!-- Alerts Modal --&gt;
  &lt;div class="ui small modal" id="mdlAlert"&gt;
   &lt;div class="header"&gt;
    Alert
   &lt;/div&gt;
   &lt;div class="content" id="mdlAlertMsg"&gt;
   &lt;/div&gt;
   &lt;div class="actions"&gt;
    &lt;div class="ui blue labeled icon button"&gt;
     &lt;i class="checkmark icon"&gt;&lt;/i&gt;
     Okay
    &lt;/div&gt;
   &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>