title: jQuery .load() bootstrap modal and show
body: <p>I am trying to <code>.load()</code> a bootstrap modal in my page and show it immediately. Below is the code I have written (which isn't working as the modal opens but can then never be closed)!</p>
  
  <p>Basically I am trying to <code>.load()</code> a list of players in a modal when you click on a team name (with the class <code>.team</code>), I've tried various ways of calling <code>$($this).empty()</code> with no success.</p>
  
  <p>Here is my function:</p>
  
  <pre><code>   $(function () {
          $('.team').on('click', function () {
              var target = $(this).data('target');
  
              $('#results-modals').load('/team-players.html ' + target, function (response, status, xhr) {
                  if (status === "success") {
                      $(target).modal({ show: true });
                  }
              });
          });
    });
  </code></pre>
  
  <p>Here is the html anchor and example modal:</p>
  
  <pre><code>&lt;a class='team' data-toggle='modal' data-target='#20'&gt;Real Madrid&lt;/a&gt;
  </code></pre>
  
  <p>Data held in external file team-players.html:</p>
  
  <pre><code>&lt;div id='20' class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true"&gt;
    &lt;div class="modal-dialog modal-lg"&gt;
       &lt;div class="modal-content"&gt;
         &lt;p&gt;Player 1: Ronaldo&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>