[英]jQuery .load() bootstrap modal and show
我正在尝试.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>
$(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>
而不是$($this).modal({ show: true });
试试$(this).modal('show');
要隐藏模态,可以使用$(this).modal('hide');
您可以执行$(this).modal("toggle")
如果打开它将关闭,反之亦然。
jQuery .load()bootstrap modal和show
for show $(#ID).modal('show');
for hide $(#ID).modal('hide');
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.