title: Bootstrap modal is not taking the button backward
body: <p>My code is working but the button is not going backward after clicking.
  <a href="https://i.stack.imgur.com/XM7ym.png" rel="nofollow noreferrer"> Here is my output</a></p>
  
  <pre><code>&lt;a href="#myModal" role="button" class="btn btn-large btn-primary" data-toggle="modal"&gt;Launch Demo Modal&lt;/a&gt;
  </code></pre>
  
  <p>Here is the Html code:</p>
  
  <pre><code>&lt;div id="myModal" class="modal fade"&gt;
  &lt;div class="modal-dialog"&gt;
      &lt;div class="modal-content"&gt;
          &lt;div class="modal-header"&gt;
              &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;&amp;times;&lt;/button&gt;
              &lt;h4 class="modal-title"&gt;Confirmation&lt;/h4&gt;
          &lt;/div&gt;
          &lt;div class="modal-body"&gt;
              &lt;p&gt;Do you want to save changes you made to document before closing?&lt;/p&gt;
              &lt;p class="text-warning"&gt;&lt;small&gt;If you don't save, your changes will be lost.&lt;/small&gt;&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="modal-footer"&gt;
              &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Close&lt;/button&gt;
              &lt;button type="button" class="btn btn-primary"&gt;Save changes&lt;/button&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>Here is the javascript:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  $('#c').click(function(){
      $("#myModal").modal('show');
  });
  </code></pre>
  
  <p></p>