jQuery .load() 引导模式并显示答案

【问题标题】：jQuery .load() bootstrap modal and showjQuery .load() 引导模式并显示
【发布时间】：2014-09-27 12:55:17
【问题描述】：

我正在尝试在我的页面中 .load() 一个引导模式并立即显示它。以下是我编写的代码（在模式打开时无法正常工作，但永远无法关闭）！

基本上，当您单击团队名称（类.team）时，我正在尝试.load() 模式中的玩家列表，我尝试了各种调用$($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>

【问题讨论】：

返回一个 'Uncaught ReferenceError: show is not defined'
将你的变量重命名为其他任何东西！，不以 $ 开头。
并使用 $(this).attr('data-target') 代替数据

标签： javascript jquery html twitter-bootstrap

【解决方案1】：

代替$($this).modal({ show: true }); 试试$(this).modal('show');

要隐藏模态框，可以使用$(this).modal('hide');

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

你可以$(this).modal("toggle")，如果它打开它就会关闭，反之亦然。

【讨论】：

【解决方案4】：

jQuery .load() 引导模态并显示

为节目$(#ID).modal('show');

用于隐藏$(#ID).modal('hide');

【讨论】：