第09课：弹框组件整合——完善添加和修改功能

弹框

弹框是 Web 产品中常见的一种交互方式，作用非常之多，可以用作提醒插件、侧边栏插件、信息编辑插件。Web 弹框一般包含一个蒙版，一个主体及多个触发各种事件的按钮，较常见于网页端，移动端也存在不过多数是作为提醒框使用。

弹窗主要包括以下几大优点。

• 节省页面

一个模块通常会包含列表、增加、编辑等项能，因功能和数据需求不同，一般会被设计成多个页面：列表页面、添加页面、编辑页面等，而使用弹窗则可以使得所有操作在一个页面中完成，达到节省页面的目的。

• 提升交互体验

不用频繁的跳转页面，设计良好的弹框也能使得页面体验更好。

• 聚焦用户

让用户聚焦于一个页面而不离开当前页面，使得用户可以更快地完成相应的操作。

• 完善页面

弹窗的妙处在于不影响页面整体布局的情况下使得页面更加饱满，而且弹窗是一个独立的插件，不用担心弹窗会影响页面（除非过度使用弹窗），因此弹窗越来越广泛地应用于 Web 工程中。

弹窗主要使用场景包括：

• 提示框：这是最为常用的方式，对用户进行信息提示。
• 侧边栏：左侧通常为菜单栏，部分系统会在右侧设计工具栏，弹窗设计也会用到。
• 选择器：日期选择框、多选框等等页面元素也会用到弹框设计。
• 扩展信息展示：页面大小有限，部分数据无法全部显示，可以使用弹窗设计进行优