title: bootstrap modal dialog not showing (black background showing)
body: <p>I have <strong>two modal dialogs</strong>(causing the issue) in the html file.</p>
  
  <p><strong>Which ever modal dialog is placed first in the sequence of the html file, shows properly on button click (vice-versa).</strong></p>
  
  <p>Both modal dialogs have unique id's and are invoked appropriately, yet one modal dialog doesn't show up (if invoked later on-separately).</p>
  
  <pre class="lang-html prettyprint-override"><code>     &lt;!-- Modal dialog xyz is the first in the sequence of html code --&gt;
       &lt;div class="modal fade" id="xyzModal" tabindex="-1" role="dialog" aria-labelledby="xyzModalTitle" aria-hidden="true"&gt;
          &lt;div class="modal-dialog modal-dialog-centered" role="document"&gt;
            .....
          &lt;/div&gt;
       &lt;/div&gt;
  
       &lt;!-- Modal dialog abc is the second M.D in the sequence of html code --&gt;
       &lt;div class="modal fade" id="abcModal" tabindex="-1" role="dialog" aria-labelledby="abcModalTitle" aria-hidden="true"&gt;
          &lt;div class="modal-dialog modal-dialog-centered" role="document"&gt;
            .....
          &lt;/div&gt;
       &lt;/div&gt;
  </code></pre>
  
  <p>Where exactly am I going wrong in invocation of the modal dialogs.</p>
  
  <p>For the corresponding button clicks, I am using hide/show functions as well, but is not working.</p>
  
  <pre class="lang-js prettyprint-override"><code>     $("#xyzModal").modal('hide');
       $("#abcModal").modal('show');
  </code></pre>