在本章中，你将学会两种管理后台弹窗的交互方式。
在通用后台产品设计中，常常会使用到ModelView模态弹窗，比如：我们需要新建一条数据，交互方式为点击新增，系统打开一个弹窗，编辑完数据后，点击确定，系统关闭弹窗。
常见的交互效果有2种，一种是点击直接打开弹窗，另一种交互方式也很常见，点击搜索时，弹窗从左边打开，确定后，向右滑动收起，如下所示：
那么本章，我们就来学习下这两种管理后台的弹窗交互。
项目搭建
首先，创建一个新项目，命名为ModelView。
页面样式-示例页面
我们先创建一个简单的页面，来作为展示的示例。
这里科普下一个知识点。
要搭建一个逻辑清晰、赏心悦目的产品原型，首要的除了产品逻辑之外，很核心的要求是统一性原则，即同一场景下文字颜色、大小、字号统一，通用组件尺寸、颜色、设计风格统一，页面排布、格局、交互方案统一。
很多企业的产品做的很差，不一定是产品本身功能有问题，而是用户看到这个产品时的第一印象就不好。简单来说，就是页面不好看，这和谈恋爱是一个道理，相亲的时候看到对方长得奇奇怪怪的，鼻子不是鼻子，眼睛不是眼睛，自然也就不想深入了解。
做产品亦是如此。
页面样式-示例弹窗
回到主题，接下来，我们先做一个弹窗的样式。
弹窗的样式也比较简单，几个矩形组件、几个文本标签组件，加一些填充颜色和调整页面布局，我们很快就可以完成一个弹窗页面。
这里我们可以注意到一个细节点，主色调和页面的主色调是一致的，这样看起来才和谐 。
我们把弹窗组合起来，命名为“切换订货会”。
页面样式-弹窗蒙层
蒙层的页面样式也比较简单，拖入一个矩形组件，命名为“蒙层”。
调整它的大小等于主页面展示的大小，然后填充颜色为#000000，不透明度设置为30%。
这里要注意的是层级问题，要把弹窗和蒙层置于顶层，然后弹窗要在蒙层的上层。
准备好组件后，我们来完成交互动作。
交互动作-隐藏
首先，在我们初次访问这个页面的时候，弹窗和蒙层是看不到的，只有我们点击相对应的操作才出现。
我们给弹窗和蒙层都加上一个载入时隐藏本身的交互。
紧接着，弹窗和蒙层显示后什么时候会消失？
是的，在点击弹窗中的关闭按钮，或者点击弹窗内部的某些特定操作时，弹窗和蒙层都会关闭。
那么，我们也加上相应的交互动作，在点击时，隐藏蒙层、切换订货会弹窗，并加上了交互动作为逐渐200ms。
交互动作-显示
隐藏的交互我们完成了，那么什么时候弹窗和蒙层才会显示呢？而且如何能让蒙层和弹窗移动到主页面中？
这里就涉及到2个交互动作了，一个是移动，一个是显示。
在做移动交互前，我们要知道弹窗和蒙层移动后的最终位置。
蒙层的最终的位置为（64，0），弹窗最终位置为（512，302），上图的原型是我们把蒙层和弹窗移动到最终产生页面效果的位置的示例。
我们把蒙层和弹窗拖回原点，然后在按钮上添加交互。
我们选中“切换”按钮，在交互工具栏中添加了一个点击时的交互。
交互动作分别为移动蒙层到达（64，0），移动切换订货会弹窗到达（512，312），并显示蒙层和弹窗，其中弹窗为避免层级关系，我们还勾选了弹窗置于顶层。
我们在浏览器中预览下效果：
页面载入时，蒙层和弹窗是隐藏起来的，当我们点击“切换”按钮，显示蒙层和弹窗，当我们单击弹窗的关闭按钮或者内部操作，隐藏弹窗和蒙层。
恭喜你，完成了第一种通用的ModelView模态弹窗展示方式！
项目延伸-抽屉弹窗
另一种弹窗的交互方式也是相同的原理。
我们可以看到示例的产品原型，它也是 一个搜索弹窗，只不过它会大一点，然后也是初始隐藏，点击相应的按钮操作展示，点击关闭再隐藏。
只是它另外增加了显示和隐藏的交互罢了。
我们确定好搜索弹窗最终的位置为（800，0），然后先设置隐藏交互。
在关闭按钮、确定按钮、取消按钮都加上单击时的交互动作，交互为隐藏蒙层，交互动作为逐渐300ms。隐藏搜索弹窗，交互为向右滑动200ms。
相同的，显示效果也是移动+显示，点击高级搜索按钮，交互动作分别为移动蒙层到达（64，0），移动搜索弹窗到达（800，0），并显示蒙层和弹窗，其中弹窗为避免层级关系，我们还勾选了弹窗置于顶层。
项目预览
完成后，我们在浏览器中预览下效果：
哈哈哈，效果不错！
为了让这个项目能够公开访问，我们可以生成html文件，然后发布到gitHub或者gitee中，这样就可以将网站分享给朋友们了。
网站地址
ModelView模态弹窗：ricardowesley.gitee.io/modelview
快来动手试试吧！
如果本专栏对你有帮助，不妨点赞、评论、关注～
