对话框

定义

弹窗是一个承载即时信息和操作的辅助窗口。用户可以利用弹窗来进行快速的信息浏览、界面操作等不离开当前主要行动路径的功能。



规则

· 依据能否影响其他内容的浏览和操作,分为阻碍式和非阻碍式两类;
· 阻碍式对话框位置应始终和浏览器保持水平和垂直方位居中,非阻碍式对话框放置于与其相关的操作内容旁边;
· 对话框的操作以简单为主,需要内滚动或是长时间的操作,或是展开内容信息较大且和当前页面的场景联系不是很大时,建议使用一般页面完成;如必需要内滚动则出现滚动条;
· 对话框绝对不能超出当前屏幕之外(浮层外的滚动为不可用),最大高度和宽度需和浏览器保持一定距离;
· 对话框中不能再弹出对话框;



基础样式




尺寸和标注

· 弹窗建议宽度为: 320, 540,900;高度:最高不超过500,最低不小于160;
· 弹窗与浏览器窗口保持至少40的间距;
· 弹窗的内容溢出规定高度时,框体右侧出现滚动条;



尺寸和标注




分类

1. 阻碍式弹窗

弹窗出现时,页面上加灰色或白色半透明底,只有完成或关闭该窗口,其他区域才可操作,位置居于页面正中间。



2. 非阻碍式弹窗

弹窗出现时,没有蒙版阻碍用户继续使用除弹窗之外的其他操作。非阻碍式弹窗一般位于相关操作附近。



3. 按键位置




4. 操作栏锁定




5. 指向性弹窗

框体使用气泡元件样式。



6. 无标题、无行动点




7. 图片


上一篇: 单选框