梦想这东西和经典一样,不会因为时间而褪色,反而更显珍贵

Bootstrap 模态框每次都重新加载解决方案

2017-5-31 16:39:16 · 2758次浏览

Bootstrap 模态框每次都重新加载解决方案

$("#myModal").modal({
    show: true,
    remote: "XXXX",
    backdrop : 'static'
});

通过以上代码利用 jQuery 的 load 方法从此 URL 地址加载要展示的内容,但是展示的内容只加载一次。

解决方案

通过监听模态框被隐藏事件,清除该框内加载的元素。

$('#myModal').on('hidden.bs.modal', '.modal', function () {
    $(this).removeData("bs.modal");
    $(".modal-body").children().remove();
});

$('#myModal').model Options的属性


名称类型默认值描述
backdropboolean 或 字符串 'static'true点击背景是否关闭模态框
keyboardbooleantrue键盘上的 esc 键被按下时关闭模态框
showbooleantrue模态框初始化之后就立即显示出来
remotepathfalse如果提供的是 URL,将利用 jQuery 的 load 方法从此 URL 地址加载要展示的内容(只加载一次)并插入.modal-content 内。 如果使用的是 data 属性 API,还可以利用 href 属性指定内容来源地址

事件


事件类型描述
show.bs.modalshow 方法调用之后立即触发该事件。如果是通过点击某个作为触发器的元素,则此元素可以通过事件的 relatedTarget
shown.bs.modal此事件在模态框已经显示出来(并且同时在 CSS 过渡效果完成)之后被触发。如果是通过点击某个作为触发器的元素,则此元素可以通过事件的 relatedTarget 属性进行访问。
hide.bs.modalhide 方法调用之后立即触发该事件。
hidden.bs.modal此事件在模态框被隐藏(并且同时在 CSS 过渡效果完成)之后被触发。
loaded.bs.modal从远端的数据源加载完数据之后触发该事件。

写在最后

1.本文是Lorna的笔记,如果你觉得以上代码及说明存在问题或者可以改进的地方,请留言告诉我,非常感谢!


与本文相关的文章推荐

没有找到文章~~