如何在html上做弹框效果,如何设计优秀的弹出框网页设计？

最近做项目的时候，发现项目上对于弹出框网页​设计的使用有点混乱。例如，需要给用户一个操作提示，用弹出框来完成。用户对这个功能不了解，加一个“查看详情”的图标，用户点击后跳出弹出框来给用户展示详情。用户想查看这笔操作的详细记录，还是用一个弹出框来展示。因为要表现的内容不一样(表单，文字，插画)，所以弹出框的样式不统一，设计的一致性被打破。而且弹出框出现的频率过高，会对用户的正常操作流程造成干扰。所以这篇文章我对弹出框的使用做了一些总结。

什么时候使用弹出框

在我看来，项目上弹出框的使用出现混乱，归根结底是对弹出框使用时机的不了解。因为不知道什么情况下该使用弹出框，所以会导致弹出框出现在一些不应该出现的地方。其实设计师在使用弹出框之前一定要慎重，要反复问自己这里是否必须要使用弹出框。因为弹出框会打断用户当前的操作流程，属于比较强势的干扰行为。

设计的包容性很强，弹出框可以完成的功能其实可以通过其他设计元素来代替。接下来我们来看下那些弹出框的替代者们：

弹出框与开屏广告

目前来说，当app进行版本更新或者有新的功能(产品)上线的时候，通常会使用弹出框来提醒用户。

其实开屏广告完全可以替代弹出框，而且开屏广告因为空间更大，可以更好的完成宣传功能。

弹出框与切换页面

我们比较常见的详情展示页面，这类页面可以通过弹出框也可以通过加载一个新的页面来承载信息。从用户体验的连贯性来说，用弹出框更好些。因为使用弹出框用户还可以停留在当前页面，页面内容不会被刷新。而且弹出框打开速度更快，反应更及时，更容易受到用户的青睐。

但是弹出框可以承载的信息量是有限的，如果信息过多导致用