jQuery .load() bootstrap modal and show

Question

I am trying to .load() 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)!

Basically I am trying to .load() a list of players in a modal when you click on a team name (with the class .team), I've tried various ways of calling $($this).empty() with no success.

Here is my function:

   $(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 });
                }
            });
        });
  });

Here is the html anchor and example modal:

<a class='team' data-toggle='modal' data-target='#20'>Real Madrid</a>

Data held in external file team-players.html:

<div id='20' class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
     <div class="modal-content">
       <p>Player 1: Ronaldo</p>
    </div>
  </div>
</div>

Answer 1

You can do $(this).modal("toggle") if it open it will close and vice versa.

Answer 2

Instead of $($this).modal({ show: true }); try $(this).modal('show');

To hide the modal, you can use $(this).modal('hide');