angular中model彈框消失後遮罩層未隱藏的解決方法
阿新 • • 發佈：2019-01-04
在做專案的時候，遇到個問題，在controller中執行彈出框隱藏函式後立即跳轉路由，出現遮罩層不隱藏的情況
showAlertDialog函式如圖，即1秒後模態框自動隱藏
開啟瀏覽器除錯，看到頁面中有遮罩層，且元素中還存在一個modal-backdrop的div
這個應該是本應該消失的模態框的元素，不知道為啥還在，可能是路由模態框消失後立即路由跳轉造成的（我猜的。。）。在網上找了百度了很久，有大神說使用ajax區域性重新整理可以解決這個問題，but。。。我這個用的angular框架，且控制路由跳轉的觸發事件是在另一個路由中，就是說點選路由一中的按鈕，控制路由二（路有一的子路由）重新整理，目前想到比較簡單的方法就是使用angular的$state.go()。因此我想到的方法是：移除這個backdrop遮罩層。。。如圖
但是移除後又出現個問題，路由跳轉後改頁面滾動條消失了。是因為模態框中還有個
.model-open{
overflow:hidden;
}
所以一定不能忘記還要移除這個類$(‘body’).removeClass(‘model-open’);
問題解決·~~
總結：在使用模態框時，如果想在模態框消失後執行路由跳轉的操作，應該是通過ajax區域性重新整理，如果由於某些原因不能使用或不方便或者懶（比如我這種。。。）則可採用次方法。
程式碼如下
