web-dev-qa-db-fra.com

jQuery .load () bootstrap modal et show

J'essaie de .load() un modal d'amorçage dans ma page et le montre immédiatement. Vous trouverez ci-dessous le code que j'ai écrit (qui ne fonctionne pas lorsque le modal s'ouvre mais ne peut jamais être fermé)!

Fondamentalement, j'essaie de .load() une liste de joueurs dans un modal lorsque vous cliquez sur un nom d'équipe (avec la classe .team). J'ai essayé différentes manières d'appeler $($this).empty() sans succès.

Voici ma fonction:

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

Voici l'ancre HTML et l'exemple modal:

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

Données contenues dans le fichier externe 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>
javascriptjqueryhtml5twitter-bootstrap
10
Matt D. Webb

Au lieu de $($this).modal({ show: true }); essayez $(this).modal('show');

Pour masquer le modal, vous pouvez utiliser $(this).modal('hide');

6
Trevor Hutto

$(function(){
  var url = "url of the modal window content";
  $('.my-modal-cont').load(url,function(result){
  $('#myModal').modal({show:true});
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<!-- Modal Window Container -->
<div class="my-modal-base">
	<div class="my-modal-cont"></div>
</div>

<!-- Modal Window content -->
<div id="myModal" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog">
	<div class="modal-content">
		<div class="modal-header">
		<button type="button" class="close" data-dismiss="modal">×</button>
			<h3>Modal header</h3>
	</div>
	<div class="modal-body">
		<p>My modal content here…</p>
	</div>
	<div class="modal-footer">
		<button class="btn" data-dismiss="modal">Close</button>
	</div>
	</div>
</div>
</div>

8
Harikumar A

Vous pouvez faire $(this).modal("toggle") s'il s'ouvre il se fermera et inversement.

0
Felix Jacob Borlongan