JQuery/Bootstrap：关闭和打开同一个modal刷新内容，动态生成
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32738623/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JQuery/Bootstrap: close and open the same modal to refresh the content, which is generated dynamically
提问by Eddy Th
I have a products page and once user click on a product I open up a modal generating dynamically the content. In the modal itself there are other products so when the user click there I would like to close the modal and re-open it in order to refresh the content - so once the modal reload the old content should be deleted and replaced with the new one.
我有一个产品页面，一旦用户点击产品，我就会打开一个动态生成内容的模式。在模态本身还有其他产品，所以当用户点击那里时，我想关闭模态并重新打开它以刷新内容 - 所以一旦模态重新加载旧内容应该被删除并替换为新内容.
Below a simplified version:
下面是简化版：
<html lang="en">
<head>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/ajax.js"></script>
<script>
function openmodal(id){
var id=id;
var other="<a onclick='openmodal(1)' style='cursor:pointer'>product 1</a><a onclick='openmodal(2)' style='cursor:pointer'>product 2</a><a onclick='openmodal(3)' style='cursor:pointer' >product 3</a>";
$('#item_modal').modal('show');
$("#target_title").text(id);
$("#target_other").append(other);
}
</script>
</head>
<body>
<a onclick="openmodal(1)" style="cursor:pointer">product 1</a>
<a onclick="openmodal(2)" style="cursor:pointer">product 2</a>
<a onclick="openmodal(3)" style="cursor:pointer">product 3</a>
<div id="item_modal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-body">
<h1 id="target_title"></h1>
<div id="target_other">
</div>
</div>
</div>
</div>
<!-- jQuery -->
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.easing.min.js"></script>
<script src="js/classie.js"></script>
<script src="js/cbpAnimatedHeader.js"></script>
</body>
</html>
</body>
</html>
Any help? Thanks Best
有什么帮助吗？谢谢最好
采纳答案by Guruprasad Rao
Since you are hidingand showingon the same instance it will create one more backdrop but will not be able to show the modalagain. So you either can have a setTimeoutbefore showing the modalwith a minimal time interval, which will be inefficient as a backdrop will not be destroyedor just make use of shown.bs.modalmethod and hide modalbefore showing as below:
由于您在同一个实例上隐藏和显示，它将创建更多背景，但将无法modal再次显示。所以你可以有一个setTimeoutbeforemodal以最小的时间间隔显示，这将是低效的，因为背景不会被破坏，或者只是在显示之前使用shown.bs.modal方法和隐藏modal，如下所示：
function openmodal(id){
var id=id;
//No need to hide here
$('#item_modal').modal('show');
$("#target_title").text(id);
}
$("#item_modal").on("shown.bs.modal",function(){
//will be executed everytime #item_modal is shown
$(this).hide().show(); //hide first and then show here
});
UPDATE
更新
To have a fadeInand fadeOuteffect here is the little trick but you might feel its bit slowand its upto you to opt this solution or not
这里有一个fadeIn和fadeOut效果是一个小技巧，但你可能会觉得它有点slow，取决于你是否选择这个解决方案
function openmodal(id){
var id=id;
var other="<a onclick='openmodal(1)' style='cursor:pointer'>product 1</a><a onclick='openmodal(2)' style='cursor:pointer'>product 2</a><a onclick='openmodal(3)' style='cursor:pointer' >product 3</a>";
$('#item_modal').fadeOut("slow",function(){
$(this).modal('hide')
}).fadeIn("slow",function(){
$("#target_title").text(id);
$("#target_other").html(other);
$(this).modal('show')
});
}
You can now remove shown.bs.modalpart as it is handled in the functionitself
您现在可以删除shown.bs.modal部分，因为它function本身是处理的
回答by Gautam
You can destroy the modal object before calling the same modal next time. The object is destroyed when the modal is hidden.
您可以在下次调用相同的模态之前销毁模态对象。当模态隐藏时，对象被销毁。
$('body').on('hidden.bs.modal', '.modal', function () {
$(this).removeData('bs.modal');
});
