前言

本文所陈述的问题解决方案是技术栈基于angualr1.x,bootstrap/[email protected]版本下，所处理的问题。（项目中遇到的一个问题，作以记录。）

什么样的问题？

在基于上文所述的技术栈上所做的一个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>