bootstrap3.*的modal一般用法都在模态框的使用办法里面,其中具体说一下缓存。
使用场景:
点击按钮弹出动态modal,加载modal的时候显示loading.gif图片,完全加载后显示完整的加载页面。点击其他按钮继续显示其他的modal页面(上一个modal页面不能显示出来)
代码:
<script type="text/javascript">
;(function ($,window,undefined) {
$('#modal').on('show.bs.modal', function () {
$(this).append("<img src='{{ asset("images/loading.gif") }}' class='modal-loading' style='width:60px;height:60px;position:absolute;top:50%;left:50%;margin-left:-30px;margin-top:-30px;z-index:98;' >");
});
$('#modal').on('hidden.bs.modal', function () {
$(this).find(".modal-content").html('');
$(this).removeData();
});
$("#modal").on('loaded.bs.modal',function(){//数据加载完成后删除loading
$(this).find("img").remove();
});
})(jQuery);
</script>
#modal为整个模态框的id,img为添加的loadinggif图,
loaded.bs.modal是在动态页面加载完成之后执行“删除img元素”(本来想用shown.bs.modal,但是在页面没有加载出来这个动作就已经执行了,所以放弃了这个)。$(this).removeData();网上一般就只有这一个答案,这条语句的确是删除了缓存文件,如果只使用这一条语句我们会发现页面上的元素根本就没有删除,点击其他按钮的时候,再次加载页面首先显示的会是上一个页面的内容,而且loading同时也会显示出来,等待一段时间后modal被刚刚的请求页面覆盖,loading消失,所以为了解决这个问题,我又添加了上面一条语句。