Question

我有一个产品页面，一旦用户点击产品，我就会打开一个动态生成内容的模态。在模态本身还有其他产品，所以当用户点击那里我想关闭模态并重新打开它以刷新内容 - 所以一旦模态重新加载旧内容应删除并替换为新内容。

简化版本下方：

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

有任何帮助吗？谢谢最好

Answer 1

您可以在下次调用相同的模态之前销毁模态对象。隐藏模态时，对象将被销毁。

$('body').on('hidden.bs.modal', '.modal', function () {
  $(this).removeData('bs.modal');
});

Answer 2

<强> DEMO

由于您在同一个实例上隐藏和显示，它将再创建一个背景，但无法再显示modal。因此，您可以在以最短时间间隔显示setTimeout之前获得modal，这将是低效的，因为背景不会被销毁或只是使用{{ 1}}方法并在显示如下之前隐藏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 });和fadeIn效果是一个小技巧，但您可能会感觉到它的位fadeOut并由您决定是否选择此解决方案

<强> DEMO

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') }); }本身处理的shown.bs.modal部分

JQuery / Bootstrap：关闭并打开相同的模式来刷新动态生成的内容

2 个答案: