这是目前**效的Modal实现方式，希望对你有用，enjoy~

Modal简介

弹窗、对话框、浮层，我们在网页中会经常看到这些元件。这类元件统称为Modal（模态对话框）。Modal一般使用在如下场景：需要用户处理事务，又不希望跳转页面以致打断工作流程时，可以使用 Modal 在当前页面正中打开一个浮层，承载相应的操作。

特性

如下图所示，这是一个最常规的Modal。

Modal通常呈现出以下几个特点：

1、居中

Modal居中显示，明确告知用户当前内容必须进行处理。

2、遮罩

将Modal外的内容遮罩，引导用户的视觉焦点到Modal上。

3、需手动关闭

Modal是模态对话框，是必须要用户做出操作才能继续进行下去的。

原型设计

在原型设计的过程中，pm能够高效地实现Modal的制作，是很重要的。

高效的具体表现为：元件要少、用例要少、复用性高、逻辑清晰。

如下图所示，这是一个Modal的高效实现方法。（预览地址：https://c5zu4k.axshare.com）

该方法使用了3个按钮，1个动态面板，实现了3个Modal的。无论再添加几个按钮和Modal，始终只需要原来的一个动态面板，也无需添加新的用例。

如何设置

1、添加3个按钮,名称如下图。添加1个动态面板（设置为隐藏），设置4个状态，名称如下图。

2、右击动态面板，勾选“自动调整为内容尺寸”和”固定到浏览器“，设置见下图。

3、为按钮添加用例

4、为动态面板添加用例

5、在动态面板的状态（除去State1）内添加内容，为操作按钮（确定、取消）添加用例。

6、大功告成，在浏览器内预览即可查看效果。

如何复用

如需在此基础上添加更多的按钮和Modal，可以按一下方式操作：

新增一个按钮，名称设置为Button4；复制动态面板的Button3状态，新的状态名称设置为Button4，修改Button4中的内容为自己想要的内容即可。

这样的复用，无需新增动态面板，也无需新增用例，在添加多个Modal时会十分高效。

知识点解析