title: The modal screen remains black on showing AJAX response after modal hide
body: <p>The following is the HTML code. When I click on Upload Building, the following file selection modal pops up. Once the user selects a file and clicks the upload button on the modal, the modal should close down, send an AJAX query, and then replace the upload button with the HTML response. </p>
  
  <pre><code># HTML Code
  &lt;div class="container-fluid mx-auto"&gt;
      &lt;div class="row mainbox" id="input"&gt;
          &lt;div class="col-sm-5"&gt;
              &lt;button type="button" class="btn btn-secondary btn-sm btn-block" id="btn-upload-file" data-toggle="modal" data-target="#mdl-upload-file"&gt;Upload Building&lt;/button&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="modal fade" id="mdl-upload-file" tabindex="-1" role="dialog" aria-labelledby="uploadFileModal" aria-hidden="true"&gt;
      &lt;div class="modal-dialog modal-dialog-centered" role="document"&gt;
          &lt;div class="modal-content"&gt;
              &lt;div class="modal-header"&gt;
                  &lt;h5 class="modal-title" id="uploadFileModal"&gt;Upload Building Config&lt;/h5&gt;
                  &lt;button type="button" class="close" data-dismiss="modal" aria-label="Close"&gt;
                      &lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;
                  &lt;/button&gt;
              &lt;/div&gt;
              &lt;div class="modal-body"&gt;
                  &lt;div class="custom-file"&gt;
                      &lt;input type="file" class="custom-file-input" id="customFile" accept="application/JSON"&gt;
                      &lt;label class="custom-file-label"&gt;Choose file...&lt;/label&gt;
                      &lt;small id="uploadHelp" class="form-text text-muted"&gt;Please upload a valid building configuration JSON file.&lt;/small&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="modal-footer"&gt;
                  &lt;button type="button" class="btn btn-secondary" data-dismiss="modal"&gt;Close&lt;/button&gt;
                  &lt;button type="button" class="btn btn-primary" id="btn-upload-selected-file"&gt;Upload File&lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Following is the javascript code to do that.</p>
  
  <pre><code>jQuery('#btn-upload-selected-file').on('click', function() {
      $('#mdl-upload-file').modal('hide');
      if (validBuildingFile) {
          fileObj['build_type'] = 'upload';
          jQuery.ajax({
              type: "POST",
              url: "/build",
              data: JSON.stringify(fileObj),
              dataType : "html",
              contentType: "application/json",
              success: function(response) {
                  jQuery('.mainbox').html(response);
              },
              error: function() {
                  alert(response);
              }
          });
      }
  });
  </code></pre>
  
  <p>Now, when I use alert instead of <code>jQuery('.mainbox').html(response)</code>, the modal closes down successfully. However, when I try to show the response, the black screen of the modal doesn't go away. I tried multiple solutions provided on stack overflow (given below), but none of them worked for me:</p>
  
  <ol>
  <li><code>$('#mdl-upload-file').hide();</code></li>
  <li><code>$('#mdl-upload-file').remove();</code></li>
  <li>Set timeout to 5000</li>
  <li><code>$('#modalElement').data('modal', null);</code></li>
  </ol>
  
  <p>Please help! </p>