jQuery .load()bootstrap modal和show

时间:2014-08-04 23:24:25

标签: javascript jquery html5 twitter-bootstrap

我正在尝试.load()我的页面中的引导模式并立即显示它。下面是我编写的代码(当模态打开但不能关闭时,它不起作用)!

基本上,当你点击一个团队名称(使用班级.load())时,我正试图.team一个模式中的玩家列表,我已经尝试了各种调用方式{{} 1}}没有成功。

这是我的功能:

$($this).empty()

这是html锚点和示例模态:

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

外部文件team-players.html中保存的数据:

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

4 个答案:

答案 0 :(得分:8)

&#13;
&#13;
$(function(){
  var url = "url of the modal window content";
  $('.my-modal-cont').load(url,function(result){
  $('#myModal').modal({show:true});
});
})
&#13;
<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>
&#13;
&#13;
&#13;

答案 1 :(得分:6)

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

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

答案 2 :(得分:0)

如果$(this).modal("toggle")打开,则将其关闭,反之亦然。

答案 3 :(得分:0)

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

用于演出$(#ID).modal('show');

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