我正在尝试在我的页面中.load()
一个 Bootstrap 模式并立即显示它。下面是我编写的代码(它在模式打开时不起作用,但永远无法关闭)!
基本上,当您单击团队名称(类 .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 anchor 和示例模式:
<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>
关于javascript - jQuery .load() Bootstrap 模式和显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25129041/