弹窗的取消与关闭究竟有什么不同？

Original CE青年 CE青年Youthce 2022-10-22

收录于合集

弹窗Footer的取消与Header的关闭有什么不同？

文章开始便对你进行了灵魂的拷问，这是某天在咱们群内所讨论的话题，他们之间究竟存在哪些差异？又有哪些利弊？

首先在功能层面上，取消与关闭都是我们退出模态层，回到原页面当中的入口，只是在页面当中会存在一些小逻辑：

点击Header的关闭：是用户不需要进行思考或者看了Header的标题过后，就很明确就是要关闭这个弹窗。比如突然弹出一个广告，不小心点到某一个按钮，这些都是用户一开始就没打算进行任何操作，因此可以快速选择顶部的关闭

点击Footer的取消：是用户先进行过弹窗内容的阅读，发现内容可能过于复杂、可能和我的预期不符，所以想要放弃这个弹窗，这时候点击取消是他视觉浏览当中最直接的方式

有部分读者会说能不能去掉 Header 的关闭，只保留底部的取消？

其实这类型的问题，答案肯定是不能的，因为弹窗又不会只在一个地方出现，比如对话框、通知提醒框你必须得都做统一，如果去掉，会影响到其他组件的正常使用，这就叫一致性，不能因为你一个组件的任性，坏了其他组件

感谢咱们4群的小伙伴的讨论，手动@一下~ 这应该是今年最短的文章了，哈哈哈~

最后还是留个思考题：弹窗Footer的取消与Header的关闭，哪一个层级更高呢？

弹窗的 取消与关闭 究竟有什么不同？