![Axure RP 8.0中文版原型设计从入门到精通](https://wfqqreader-1252317822.image.myqcloud.com/cover/334/27563334/b_27563334.jpg)
3.6 带遮罩层的弹窗
案例描述
单击“登录”按钮,弹出带遮罩层的对话框(见图3-70),且背景半透明遮盖页面,当页面上下左右滚动时,对话框始终在浏览器中保持水平和垂直居中,在对话框中单击“关闭”按钮,关闭对话框。
![](https://epubservercos.yuewen.com/3DA301/15825992405222006/epubprivate/OEBPS/Images/Figure-P42_3385.jpg?sign=1734383852-qhnsNtdu2qPXEoRHCFWFmYDBaHq5UgFy-0-ca1ada350f5208a5160c9e3db4497e2d)
图3-70 带遮罩层的对话框
思路分析
- ▷ 用“动态面板”元件实现遮罩层和弹窗。
- ▷ 设置弹窗水平、垂直居中固定到浏览器。
- ▷ 为按钮添加“鼠标单击时”事件,添加显示/隐藏动作。
操作步骤
(1)选择“文件”|“新建”命令,新建一个Axure的文档。
(2)在左侧“元件库”面板中将“矩形1”元件拖入编辑区中,在工具栏中设置x和y均为0,“宽度”和“高度”为电脑屏幕分辨率1360×768,在编辑区单击鼠标右键,在弹出的快捷菜单中选择“转换为动态面板”命令,将“矩形”元件转换为动态面板,如图3-71所示。
![](https://epubservercos.yuewen.com/3DA301/15825992405222006/epubprivate/OEBPS/Images/Figure-P43_3413.jpg?sign=1734383852-TMoCXhd2ZlRRQzQQ5OmLdAwgNKPsFhJQ-0-be61b7504cd28e0b8c6cebfa17e93c06)
图3-71 转换为动态面板
(3)在右侧“检视:动态面板”区域设置名称为shade,双击“动态面板”元件,在弹出的“面板状态管理”对话框中双击State1选项,如图3-72所示,进入shade/State1(index)编辑区中。
![](https://epubservercos.yuewen.com/3DA301/15825992405222006/epubprivate/OEBPS/Images/Figure-P43_3423.jpg?sign=1734383852-v3lkXvp70bxwEsBCIozuGpkDYAM1W2xx-0-3067b5605944b965c0c65e301caac8b9)
图3-72 “面板状态管理”对话框
(4)在编辑区中选择“矩形”元件,单击右侧“样式”标签切换至“样式”面板,单击“填充颜色”按钮,弹出颜色面板,选择灰色(#D7D7D7)色块,设置“不透明”为50,如图3-73所示。
(5)单击index标签切换至index编辑区,在左侧“元件库”面板中将“图片”元件拖入编辑区中,双击“图片”元件,弹出“打开”对话框,选择要导入的素材图片,单击“打开”按钮即可导入图片,并设置其大小和位置,如图3-74所示。
![](https://epubservercos.yuewen.com/3DA301/15825992405222006/epubprivate/OEBPS/Images/Figure-P44_3442.jpg?sign=1734383852-AfN3tOtSNgHb5CsDwbpu9mjtTyc4AqXp-0-c267fef0684160875196b9e3d7c508cf)
图3-73 颜色面板
![](https://epubservercos.yuewen.com/3DA301/15825992405222006/epubprivate/OEBPS/Images/Figure-P44_3445.jpg?sign=1734383852-c5uUx4WMpQ0fiHS3LkSLkgjV1uxyaojo-0-d0169c675315b65b1b0a0a6bf2152d65)
图3-74 导入图片
(6)选择“图片”元件,单击鼠标右键,在弹出的快捷菜单中选择“转换为动态面板”命令,将图片转换为动态面板,在右侧“检视:动态面板”区域设置名称为dialog,如图3-75所示。
![](https://epubservercos.yuewen.com/3DA301/15825992405222006/epubprivate/OEBPS/Images/Figure-P44_3455.jpg?sign=1734383852-xES2LRUcEqOw4syNa4q82xPuqn1DXThT-0-2607beeaf146e5885793bee5906f1dcb)
图3-75 转为动态面板
(7)双击“dialog动态面板”元件,在弹出的“面板状态管理”对话框中双击State1选项,进入dialog/State1(index)编辑区中,在素材文件夹中按Ctrl+C快捷键复制要导入的素材图片,返回至编辑区中按Ctrl+V快捷键粘贴,并调整其大小和位置,在右侧“检视:图片”区域设置名称为close,如图3-76所示。
(8)选择“close图片”元件,在右侧单击“属性”标签切换至“属性”面板,双击“鼠标单击时”选项,弹出“用例编辑<鼠标单击时>”对话框,在左侧“添加动作”区域选择“隐藏”选项,在右侧“配置动作”区域选中“dialog(动态面板)”和“shade(动态面板)”复选框,如图3-77所示。单击“确定”按钮返回至编辑区中。
![](https://epubservercos.yuewen.com/3DA301/15825992405222006/epubprivate/OEBPS/Images/Figure-P45_3486.jpg?sign=1734383852-kIi9L3VlTfcjKxgHTHlKDjbREU5owNt3-0-f1e5af4be6fbfa28ff94950fe28cc9b9)
图3-76 复制粘贴图片
![](https://epubservercos.yuewen.com/3DA301/15825992405222006/epubprivate/OEBPS/Images/Figure-P45_3473.jpg?sign=1734383852-ZWPoxp1cjbbjTzYjIcftBKpVNhsgYzZb-0-1d73a7f4243ce9b2f3d1e1d4786f7a4a)
图3-77 设置隐藏动态面板
(9)单击index标签切换至index编辑区中,选择“dialog动态面板”元件,在右侧“属性”面板中单击“固定到浏览器”超链接,如图3-78所示。
(10)弹出“固定到浏览器”对话框,选中“固定到浏览器窗口”复选框,在“水平固定”和“垂直固定”选项组中均选中“居中”单选按钮,如图3-79所示,单击“确定”按钮返回至编辑区中。
![](https://epubservercos.yuewen.com/3DA301/15825992405222006/epubprivate/OEBPS/Images/Figure-P45_3477.jpg?sign=1734383852-FHGvE0Ps0tmMWhd6a2WRLmUfeIzGRR3E-0-e96a299bb09a3e3110f7d5cdda392411)
图3-78 固定到浏览器
![](https://epubservercos.yuewen.com/3DA301/15825992405222006/epubprivate/OEBPS/Images/Figure-P45_3483.jpg?sign=1734383852-JQCz9E6LckKodRqA8p5cFq6lyOG5ZS5y-0-704ea10764b622c6aded5d819307fd35)
图3-79 设置固定到浏览器
(11)从“元件库”面板中拖入“主要按钮”元件至编辑区中,双击使其呈编辑状态,输入“登录”,在工具栏中设置x和y分别为290和137,“宽度”和“高度”分别为140、40,“填充颜色”为红色(#dc5c5c),如图3-80所示。
![](https://epubservercos.yuewen.com/3DA301/15825992405222006/epubprivate/OEBPS/Images/Figure-P46_5218.jpg?sign=1734383852-9v6MK2SIQLScIBkxmBC3wIptje49p8wR-0-d2b8fed2bb30592bd44a731a6a96eba4)
图3-80 设置“按钮”元件
(12)在右侧“检视:矩形”区域设置名称为btn,在“属性”面板中双击“鼠标单击时”选项,弹出“用例编辑<鼠标单击时>”对话框,在左侧“添加动作”区域选择“显示”选项,在右侧“配置动作”区域选中“dialog(动态面板)”和“shade(动态面板)”复选框,如图3-81所示。单击“确定”按钮返回至编辑区中。
![](https://epubservercos.yuewen.com/3DA301/15825992405222006/epubprivate/OEBPS/Images/Figure-P46_5228.jpg?sign=1734383852-Qrke2F2Ed2UizRpLOFKZ28MifG2TRahu-0-0adf8401a6a08a5c07ec74c9a3b9143f)
图3-81 设置显示动态面板
(13)选择“btn矩形”元件,单击鼠标右键,在弹出的快捷菜单中选择“顺序”|“置于底层”命令,如图3-82所示,将按钮置于底层。
(14)在编辑区中选择“shade动态面板”元件和“dialog动态面板”元件,在右侧单击“样式”标签切换至“样式”面板,选中“隐藏”复选框,如图3-83所示。
(15)按Ctrl+S快捷键,以“3.6”为名称保存该文件,然后按F5键预览效果,如图3-84所示。
![](https://epubservercos.yuewen.com/3DA301/15825992405222006/epubprivate/OEBPS/Images/Figure-P47_5240.jpg?sign=1734383852-oKmqVmH3qiADcWorRvOicqhWiWKGd06V-0-f1364e43f41747782ce569ab4c906da5)
图3-82 置于底层
![](https://epubservercos.yuewen.com/3DA301/15825992405222006/epubprivate/OEBPS/Images/Figure-P47_5250.jpg?sign=1734383852-ljhBd5qaAirskesoZmRh4YvfDBQ7f2oe-0-a6720bc428e57763665cd50240603f92)
图3-83 选中“隐藏”复选框
![](https://epubservercos.yuewen.com/3DA301/15825992405222006/epubprivate/OEBPS/Images/Figure-P47_5259.jpg?sign=1734383852-g7lfXNc1NUzDTdSZKWMQZM5XjrbVyepf-0-5ed066d477dcb104e373902f95fcdbc4)
图3-84 最终效果