spa架构下，移动端modal弹出层在如何返回时自动关闭

Question

移动端会有很多的弹出层，比如loading，alert，confirm，prompt等等，在spa下用前端路由进行页面管理的情况，这些弹出层由于是被注入到body元素内的，如果按手机的返回键，虽然页面返回了，但这些弹出层还是会存在的。有解决方案吗？

1. 我想的是在这些弹出层模块内都监听一下页面变化，然后隐藏自己。
2. 第二是每个页面自己控制本页面用到的弹出层

Answer 1

router.afterEach(() => {
  Vue.prototype.$closeLoading();
  Vue.prototype.$closeModal();
  MessageBox.close();
});

这样处理就可以了吧？

Answer 2

看到你提及了vue，就以vue来说明吧。

首先控制弹出层是否显示，需要定义个标志位，类型为Boolean。初始情况下为false，当需要用到时，置为true。

对应到vue里，就是先在data里定义个flag:false，弹出时设置flag=true，不用时再flag=false。

这应该就是你所说的第二个想法的实现。不用担心页面返回了，下次再进来，弹出层依然还显示着。
具体原因，参考vue的生命周期。

Answer 3

在路由勾子函数上，处理这些问题就可以了

Answer 4

如果你的路由是基于hash的，可以监听hashchange事件，在回调函数里手动关闭所有弹出层。

window.onhashchange = function(e){
    // 关闭弹出层
}

Answer 5

按照交互规范来讲，当模态弹出层弹出时，点击手机的后退键触发的行为应该是保守式地关闭弹出层，即，如果是 alert，则相当于点击【确定】，如果是 confirm 或 prompt，则相当于点击【取消】。可以在App中看一下交互是不是这样的。如果在 SPA 单页应用中实现这样的效果，需要借助 history API 实现，在弹出时 pushState，并且监听 popstate 事件并进行相应的关闭弹出层操作。
后续我会整理个 Demo 发出来