3.6 带遮罩层的弹窗
案例描述
单击“登录”按钮，弹出带遮罩层的对话框（见图3-70），且背景半透明遮盖页面，当页面上下左右滚动时，对话框始终在浏览器中保持水平和垂直居中，在对话框中单击“关闭”按钮，关闭对话框。
图3-70 带遮罩层的对话框
思路分析
- ▷ 用“动态面板”元件实现遮罩层和弹窗。
- ▷ 设置弹窗水平、垂直居中固定到浏览器。
- ▷ 为按钮添加“鼠标单击时”事件，添加显示/隐藏动作。
操作步骤
（1）选择“文件”|“新建”命令，新建一个Axure的文档。
（2）在左侧“元件库”面板中将“矩形1”元件拖入编辑区中，在工具栏中设置x和y均为0，“宽度”和“高度”为电脑屏幕分辨率1360×768，在编辑区单击鼠标右键，在弹出的快捷菜单中选择“转换为动态面板”命令，将“矩形”元件转换为动态面板，如图3-71所示。
图3-71 转换为动态面板
（3）在右侧“检视：动态面板”区域设置名称为shade，双击“动态面板”元件，在弹出的“面板状态管理”对话框中双击State1选项，如图3-72所示，进入shade/State1（index）编辑区中。
图3-72 “面板状态管理”对话框
（4）在编辑区中选择“矩形”元件，单击右侧“样式”标签切换至“样式”面板，单击“填充颜色”按钮，弹出颜色面板，选择灰色（#D7D7D7）色块，设置“不透明”为50，如图3-73所示。
（5）单击index标签切换至index编辑区，在左侧“元件库”面板中将“图片”元件拖入编辑区中，双击“图片”元件，弹出“打开”对话框，选择要导入的素材图片，单击“打开”按钮即可导入图片，并设置其大小和位置，如图3-74所示。
图3-73 颜色面板
图3-74 导入图片
（6）选择“图片”元件，单击鼠标右键，在弹出的快捷菜单中选择“转换为动态面板”命令，将图片转换为动态面板，在右侧“检视：动态面板”区域设置名称为dialog，如图3-75所示。
图3-75 转为动态面板
（7）双击“dialog动态面板”元件，在弹出的“面板状态管理”对话框中双击State1选项，进入dialog/State1（index）编辑区中，在素材文件夹中按Ctrl+C快捷键复制要导入的素材图片，返回至编辑区中按Ctrl+V快捷键粘贴，并调整其大小和位置，在右侧“检视：图片”区域设置名称为close，如图3-76所示。
（8）选择“close图片”元件，在右侧单击“属性”标签切换至“属性”面板，双击“鼠标单击时”选项，弹出“用例编辑<鼠标单击时>”对话框，在左侧“添加动作”区域选择“隐藏”选项，在右侧“配置动作”区域选中“dialog（动态面板）”和“shade（动态面板）”复选框，如图3-77所示。单击“确定”按钮返回至编辑区中。
图3-76 复制粘贴图片
图3-77 设置隐藏动态面板
（9）单击index标签切换至index编辑区中，选择“dialog动态面板”元件，在右侧“属性”面板中单击“固定到浏览器”超链接，如图3-78所示。
（10）弹出“固定到浏览器”对话框，选中“固定到浏览器窗口”复选框，在“水平固定”和“垂直固定”选项组中均选中“居中”单选按钮，如图3-79所示，单击“确定”按钮返回至编辑区中。
图3-78 固定到浏览器
图3-79 设置固定到浏览器
（11）从“元件库”面板中拖入“主要按钮”元件至编辑区中，双击使其呈编辑状态，输入“登录”，在工具栏中设置x和y分别为290和137，“宽度”和“高度”分别为140、40，“填充颜色”为红色（#dc5c5c），如图3-80所示。
图3-80 设置“按钮”元件
（12）在右侧“检视：矩形”区域设置名称为btn，在“属性”面板中双击“鼠标单击时”选项，弹出“用例编辑<鼠标单击时>”对话框，在左侧“添加动作”区域选择“显示”选项，在右侧“配置动作”区域选中“dialog（动态面板）”和“shade（动态面板）”复选框，如图3-81所示。单击“确定”按钮返回至编辑区中。
图3-81 设置显示动态面板
（13）选择“btn矩形”元件，单击鼠标右键，在弹出的快捷菜单中选择“顺序”|“置于底层”命令，如图3-82所示，将按钮置于底层。
（14）在编辑区中选择“shade动态面板”元件和“dialog动态面板”元件，在右侧单击“样式”标签切换至“样式”面板，选中“隐藏”复选框，如图3-83所示。
（15）按Ctrl+S快捷键，以“3.6”为名称保存该文件，然后按F5键预览效果，如图3-84所示。
图3-82 置于底层
图3-83 选中“隐藏”复选框
图3-84 最终效果