jQuery .load（）bootstrap modal和show

Question

我正在嘗試.load()我的頁面中的引導模式並立即顯示它。 下面是我編寫的代碼（當模態打開但不能關閉時，它不起作用）！

基本上我正在嘗試.load()一個模式中的玩家列表，當你點擊一個團隊名稱（使用類.team ）時，我已經嘗試了各種方法來調用$($this).empty()成功。

這是我的功能：

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

這是html錨點和示例模態：

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

外部文件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

 $(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> 

Answer 2

而不是$($this).modal({ show: true }); 試試$(this).modal('show');

要隱藏模態，可以使用$(this).modal('hide');

Answer 3

您可以執行$(this).modal("toggle")如果打開它將關閉，反之亦然。

Answer 4

jQuery .load（）bootstrap modal和show

for show $(#ID).modal('show');

for hide $(#ID).modal('hide');