it-swarm.com.de

jQuery .load () bootstrap modal und show

Ich versuche, auf meiner Seite ein Bootstrap-Modal zu .load() zu machen und es sofort anzuzeigen. Unten ist der Code, den ich geschrieben habe (der nicht funktioniert, wenn der Modal geöffnet wird, der aber niemals geschlossen werden kann)!

Im Grunde versuche ich, eine Liste von Spielern in einem Modal zu .load() zu machen, wenn Sie auf einen Teamnamen klicken (mit der Klasse .team). Ich habe verschiedene Möglichkeiten ausprobiert, $($this).empty() ohne Erfolg aufzurufen.

Hier ist meine Funktion:

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

Hier ist der HTML-Anker und Beispielmodal:

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

Daten in externer Datei 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>
10
Matt D. Webb

Anstelle von $($this).modal({ show: true }); versuchen Sie $(this).modal('show');

Um das Modal auszublenden, können Sie $(this).modal('hide'); verwenden.

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

jQuery .load () bootstrap modal und show

für show $(#ID).modal('show');

für hide $(#ID).modal('hide');

0
Love Kumar

Sie können $(this).modal("toggle") tun, wenn es geöffnet wird, wird es geschlossen und umgekehrt.