发布时间：2021-1-10 分类： 电商动态
这是目前最有效的Modal实现，希望对你有用，享受〜
模态简介
弹出窗口，对话框，浮动图层，我们经常在网页中看到这些组件。这些组件统称为Modal（模态对话框）。 Modal通常用于以下场景：当用户需要处理事务，并且不想跳转到页面来中断工作流时，可以使用Modal打开当前页面中间的浮动层来进行相应的操作。
特征
如下图所示，这是最常见的模态。
Modal通常具有以下特征：
1.居中
模态居中以清楚地告知用户必须处理当前内容。
2，面具
屏蔽模态外部的内容，并将用户的视觉焦点引导至模态。
3，需要手动关闭
Modal是一个模态对话框，必须由用户操作才能继续。
原型设计
在原型设计过程中，pm能够有效地实现Modal生产是非常重要的。
高效率的具体表现是：更少的组件，更少的用例，更高的可重用性和清晰的逻辑。
如下图所示，这是Modal的有效实现。 （预览地址：https://c5zu4k.axshare.com）
此方法使用3个按钮，1个动态面板，并实现3个模态。无论您添加多少个按钮和Modal，您只需要一个原始动态面板，而无需添加新的用例。
如何设置
1.添加3个按钮，名称如下所示。添加1个动态面板（设置为隐藏），设置4个状态，名称如下所示。
2.右键单击动态面板，然后选中“自动调整为内容大小”和“更正浏览器”。见下图。
3.在按钮
中添加用例4.为动态面板添加用例
5.在动态面板的状态中添加内容（不包括State1）并添加操作按钮的用例（确定，取消）。
6，你完成了，在浏览器中预览看效果。
如何重用
要为此添加更多按钮和模态，您可以采用以下方式：
添加一个按钮，将名称设置为Button4;复制动态面板的Button3状态，将新状态名称设置为Button4，并将Button4中的内容修改为所需的内容。
这种重用消除了添加动态面板的需要，并消除了对新用例的需求。添加多个模态时效率非常高。
知识点解析
1，自动调整内容大小
动态面板的属性。动态面板中有多个状态，每个状态的内容不同。选中此项后，动态面板可以根据当前状态自动调整大小。
2，固定到浏览器窗口
动态面板的属性。设置此项后，动态面板可以与页面限制分开，并始终固定在浏览器中的某个位置。提醒提示，通知和其他组件需要固定的显示位置。这可用于实现所需要求。
3，灯箱效果
显示动态面板时的效果。设置此项后，动态面板将在显示时自动屏蔽页面的其余部分，从而实现弹出窗口的样式效果。
好的，这篇文章都在这里完成。这个实现是迄今为止我发现的最有效的Modal实现。在不断探索的过程中，已经使用了许多其他方法。结果，页面组件混乱，逻辑不清楚，可重用性差。现在看来很荒谬。我希望本文中的方法对您有所帮助。
（原型下载：https://pan.baidu.com/s/1snsPpSD）
我目前专注于后端产品的设计。我将在以后逐步分享我的一些工作经验，我希望与您讨论并共同成长。下一个是写一些规格和表格的设计。每个人都有所了解，留言！
本文最初由@流风发表。未经许可，禁止复制。
