title: Close bootstrap modal after submit
body: <p>How can I close the bootstrap modal after I click on the <code>Delete</code> button? Here's my code:</p>
  
  <pre><code>&lt;div id="media_delete_confirmation" 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;form id="modal-form"&gt;
          &lt;div class="modal-body"&gt;
            &lt;input id="media_action" value="deleteMediaAction" type="hidden"/&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-primary" data-dismiss="modal"&gt;Keep&lt;/button&gt;
            &lt;button type="button" class="btn btn-default" id="modal_delete"&gt;Delete&lt;/button&gt;
          &lt;/div&gt;
        &lt;/form&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and here's the other part:</p>
  
  <pre><code>$("#modal_delete").click(function() {
  
    var id = $(".image-picker").val();
    var media_action = $("#media_action").val();
  
    $.ajax({
      type: 'POST',
      url: '?page=myMediaController&amp;action=deleteMedia',
      data: {'media_id' : id},
      success: function(data) {
        $("#media_delete_confirmation").modal("hide");
      }
    });
  });
  </code></pre>