博客

bootstrap的modal中，有一个remote选项，可以动态加载页面到modal-body中

有两种方法，一种是使用链接，另一种就是使用脚本。

1 使用链接

<a href="user/userDetail.jsp" data-toggle="modal" data-target="#myModal">打开对话框</a>

当点击该连接时，userDetail.jsp的内容就可以动态的加载到div.modal-body中。当然这里的连接也可以是action

2 使用脚本

$("#myModal").modal({
    remote: "page.jsp"
});

但是这样加载后，会有问题，modal数据只加载一次，如果要加载不同的数据，例如根据id查询不同物品的详细信息，modal的数据是不能更新的，即使传的id值不同。其实解决办法很简单，只需要在加载下次数据前，将之前的加载的数据清除即可。

清除之前加载的数据，让对话框能够在每次打开时重新加载页面

最简单的方式就是监听modal的hidden，当modal关闭时，即把数据清除即可：

$("#myModal").on("hidden", function() {
    $(this).removeData("modal");
});

    也可以在每次打开对话框之前移除数据，效果是一样的。
   

    

     注：

    

    上面的代码基于 Bootstrap v2，如果使用 Bootstrape v3，模态对话框的 HTML 和事件的写法有一些不同，例如对于上面的 hidden 事件，要写成：
   

$("#myModal").on("hidden.bs.modal", function() {
    $(this).removeData("bs.modal");
});