找软件用软件，就到华军软件园！

AI产品榜软件发布

360安全卫士 Office365 360浏览器 WPS Office 抖音豆包搜狗浏览器

所在位置：首页 — 教程攻略 — 教程 — 电脑软件教程 — Axure RP教...

Axure RP教程 Axure RP如何制作弹出窗口

作者：葫芦娃日期：2018-01-19

1.正常打开Axure RP8.0工具，如下图，创建一个新的RP文件。

360截图20180119141551815.jpg

2.在空白页面上从元件库中拉出一个矩形框和一个按钮，矩形框是为了展示主页的内容，按钮是为了点击后弹出对话框的效果，界面设计如下截图，使用过程中根据自己项目的实际需求摆放具体内容。

360截图20180119141606183.jpg

3.从左边元件库中拉出一个动态面板，放在页面上，摆放位置可以根据需要进行摆放，也可以通过设置，使其在页面上居中显示，具体这个设置步骤请查看步骤十说明。

360截图20180119141618454.jpg

4.双击动态面板，将弹出如下对话框，先为动态面板定义一个名称，这个名称等会在设置显隐的时候需要用到。然后再单击"state1"会弹出另一个新的子页面，就可以在该页面中增加弹出框的具体内容了，详细步骤请查看截图2.

360截图20180119141627769.jpg

360截图20180119141637723.jpg

5.在上述步骤过后，主页index的页面效果将如下所示，鼠标右键点击动态面板，把动态面板设置成隐藏，具体操作如下截图2。

360截图20180119141646207.jpg

360截图20180119141656239.jpg

6.为页面上的按钮增加事件。选中按钮，在右边的设置面板中，双击“鼠标单击时”按键，如下截图1，页面将会弹出新的用例编辑窗口，选择元件的“显示/隐藏”，找到刚刚的动态面板，并将其设置为显示，具体操作如下截图2中标红的位置。这步的设置非常重要，只有正确设置了这步，才能正确的弹出窗口。

360截图20180119141717958.jpg

360截图20180119141728608.jpg

7.在第五步中增加的动态面板，也有放置一个按钮，该按钮的作用就是点击后自动关闭弹出框，设置步骤和步骤7类似，只是将“显示”改成了“隐藏”，具体操作如下截图中标红的位置。

360截图20180119141738298.jpg

8.配置完后，点击预览，在浏览器上点击“打开新窗口”按钮，页面将弹出新的对话框如下截图，点击“关闭窗口”将关闭该页面。

360截图20180119141748361.jpg

9.在第八步之后，已经完成了新窗口弹出的配置功能，这一步将分享如何美化页面。在第九步中展示的效果是设计人员在页面上将对话框放置在什么位置，弹出时就在什么位置，为了美观，我们经常需要将弹出框在页面中居中显示，要实现该功能也很简单，只要完成如下步骤就可以了。

10.在主页上，鼠标右键点击动态面板，在弹出的选择项中选择“固定到浏览器”并单击它。在弹出的对话框中按照如下截图2进行配置就可以了。

360截图20180119141756000.jpg

360截图20180119141804510.jpg

11.这时候预览页面效果，就如下截图所示，弹出框将在页面上居中展示。

360截图20180119141814574.jpg

以上就是Axure RP制作弹出窗口方法教程，更多Axure RP等软件相关教程请到华军软件园软件教程专区！

相关文章

腾讯pc管家

最新教程更多

Adobe Premiere Pro CS6怎么插入音频-Adobe Premiere Pro CS6插入音频的方法

Adobe Premiere Pro CS6怎么抠像-Adobe Premiere Pro CS6抠像的方法

Adobe Premiere Pro CS6怎么做视图比较-Adobe Premiere Pro CS6做视图比较的方法

Adobe Premiere Pro CS6怎么新建项目-Adobe Premiere Pro CS6新建项目的方法

不用手动干活了！豆包工作版上手全体验

本周热推更多

热门教程更多

电脑重装系统后没声音怎么办-驱动精灵教程

WPS Office 2019怎么切换账号-WPS Office 2019把切换账号的方法

网易mumu模拟器怎么开启root权限-网易mumu模拟器开启root权限的方法

谷歌浏览器怎么清除缓存-谷歌浏览器清除缓存的方法

word怎么安装方正小标宋简体-word安装方正小标宋简体的方法