title: How to popup modal only when the Ajax function finish execution in bootstrap jquery?
body: <p>I have a <code>Ajax</code> function like this:</p>
  
  <pre><code>function generate_summary() {
      var summary_input=document.getElementById('summary_input').value;
      var email_notify=document.getElementById('email_notify').value;
      var num_sent=document.getElementById('num_sent').value;
        $.ajax({
                  type: "GET",
                  url: "/summary/",
                  data: {summary_input:summary_input, email_notify:email_notify, num_sent:num_sent},
                  success: function(data){
                       $('#modal-body').html(data)
                  }
              });
  
  }
  </code></pre>
  
  <p>I have <code>href</code> like this:</p>
  
  <pre><code>&lt;a onclick="generate_summary()"  href="#summaryModal" style="text-decoration:none;" id="summarize_btn" role="button" class="btn btn-success offset3" data-toggle="modal"&gt;Summarize&lt;/a&gt;
  </code></pre>
  
  <p>Modal looks like this:</p>
  
  <pre><code>&lt;!-- Summary output popup  --&gt;
  &lt;div id="summaryModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"&gt;
    &lt;div class="modal-header"&gt;
      &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;×&lt;/button&gt;
      &lt;h3 id="myModalLabel"&gt;Summary&lt;/h3&gt;
    &lt;/div&gt;
    &lt;div class="modal-body" id="modal-body"&gt;
      &lt;textarea disabled id="summary_output" name="summary_input" rows="15" class="span5"&gt;&lt;/textarea&gt; 
    &lt;/div&gt;
    &lt;div class="modal-footer"&gt;
      &lt;button class="btn" data-dismiss="modal" aria-hidden="true"&gt;Close&lt;/button&gt;
      &lt;button class="btn btn-primary"&gt;Save changes&lt;/button&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Modal is a popup when summarize button is clicked. </p>
  
  <p>The output from the server is placed on:</p>
  
  <pre><code>  &lt;div class="modal-body" id="modal-body"&gt;
      &lt;textarea disabled id="summary_output" name="summary_input" rows="15" class="span5"&gt;{{ summary }}&lt;/textarea&gt; 
    &lt;/div&gt;
  </code></pre>
  
  <p><code>Ajax function, modal</code> everything is working fine. But the modal is load so quickly and the function only returns the value after <code>10-15 secs</code>. I want to show the popup modal and the summary at the same time. How can I do that?</p>