前言

本文所陈述的问题解决方案是技术栈基于angualr1.x,bootstrap/modal.js@v3.3.7版本下,所处理的问题。(项目中遇到的一个问题,作以记录。)

什么样的问题?

在基于上文所述的技术栈上所做的一个web端项目,在测试时被提出在有弹窗的界面上调出modal层,然后点击浏览器上的回退按钮。这个时候问题就来了,页面虽然成功返回至上一页,modal层却依然存在。。。

如何解决?

当按返回时触发删除遮罩层,就这么简单

<script>
$(document).ready(function(e) {
    if (window.history && window.history.pushState) {
        //每当处于激活状态的历史记录条目发生变化时,popstate事件就会在对应window对象上触发
        // popstate事件只会在浏览器某些行为下触发, 比如点击后退、前进按钮(或者在JavaScript中调用history.back()、history.forward()、history.go()方法).
        window.onpopstate = function () {
        // 此处进行你想要的操作
            $("body").removeClass("modal-open");
            $(".modal-backdrop").remove();
        }
    }
});
</script>