bootstrap的modal中，使用remote可以动态加载页面到modal-body中，并弹窗显示
如果提供的是 URL，将利用 jQuery 的 load 方法从此 URL 地址加载要展示的内容（只加载一次）并插入 .modal-content 内。如果使用的是 data 属性 API，还可以利用 href 属性指定内容来源地址。下面是两个实例：
<a data-toggle=”modal” href=”remote.html” data-target=”#modal”>Click me</a>
$(“#myModal”).modal({
remote: “/info?id=”+id,
backdrop: ‘static’,
keyboard: false
});
但是这样加载后，会有问题，modal数据只加载一次，如果要加载不同的数据，例如根据id查询不同物品的详细信息，modal的数据是不能更新的，即使传的id值不同。其实解决办法很简单，只需要在加载下次数据前，将之前的加载的数据清除即可。
解决方法：监听modal的hidden，当modal关闭时，即把数据清除即可。
代码如下
$(“#myModal”).on(“hidden”, function() {
$(this).removeData(“modal”);
});
上面的代码基于 Bootstrap v2，如果使用的是 Bootstrape v3
$(“#myModal”).on(“hidden.bs.modal”, function() {
$(this).removeData(“bs.modal”);
});
或者
$(‘body’).on(‘hidden.bs.modal’, ‘.modal’, function () {
$(this).removeData(‘bs.modal’);
});
或者
$(document).on(“hidden.bs.modal”, function (e) {
$(e.target).removeData(“bs.modal”).find(“.modal-content”).empty();
});
或者
$(document).on(“hidden.bs.modal”, “.modal:not(.local-modal)”, function (e) {
$(e.target).removeData(“bs.modal”).find(“.modal-content”).empty();
});
https://www.cnblogs.com/zqifa/p/bootstrap-modal-1.html
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/112378.html原文链接：https://javaforall.net
