angular中model弹框消失后遮罩层未隐藏的解决方法_angral 弹框遮罩层未关闭-CSDN博客

本文链接：https://blog.csdn.net/murphy_wnag/article/details/66478346

在Angular项目中，作者遇到弹出框关闭后遮罩层未隐藏的问题。通过分析发现可能是路由跳转过快导致。为解决此问题，作者尝试移除modal-backdrop元素和.model-open类，但导致滚动条消失。最终解决方案是同时移除这两个元素，确保页面正常显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在做项目的时候，遇到个问题，在controller中执行弹出框隐藏函数后立即跳转路由，出现遮罩层不隐藏的情况
这里写图片描述
showAlertDialog函数如图，即1秒后模态框自动隐藏

打开浏览器调试，看到页面中有遮罩层，且元素中还存在一个modal-backdrop的div

这个应该是本应该消失的模态框的元素，不知道为啥还在，可能是路由模态框消失后立即路由跳转造成的（我猜的。。）。在网上找了百度了很久，有大神说使用ajax局部刷新可以解决这个问题，but。。。我这个用的angular框架，且控制路由跳转的触发事件是在另一个路由中，就是说点击路由一中的按钮，控制路由二（路有一的子路由）刷新，目前想到比较简单的方法就是使用angular的$state.go()。因此我想到的方法是：移除这个backdrop遮罩层。。。如图这里写图片描述
但是移除后又出现个问题，路由跳转后改页面滚动条消失了。是因为模态框中还有个
.model-open{
overflow:hidden;
}
所以一定不能忘记还要移除这个类$(‘body’).removeClass(‘model-open’);