小楼axure图文教程八带遮罩层的弹出框

《小楼axure图文教程八带遮罩层的弹出框》由会员分享，可在线阅读，更多相关《小楼axure图文教程八带遮罩层的弹出框（4页珍藏版）》请在装配图网上搜索。

1、小楼axure图文教程（八）带遮罩层的弹出框作者:小楼一夜听春语 分类: Axure教程 发布时间: 2013-07-12 22:58?6?6没有评论 编辑本文出自 诉客 - -产品经理的心声，转载时请注明出处及相应链接。示例原型下载： 小楼 AxureAxure 原创元件 - - 带遮罩层的弹出框实现目标：1 1 、 点击按钮弹出带遮罩层的对话框；2 2 、 页面上下左右滚动时，弹出的对话框水平和垂直始终居中。实现步骤如下：1 1 、 拖入编辑区 2 2 个矩形，并点右键转换转换为动态面板；2 2 、 双击其中一个动态面板设置标签为“遮罩层”（看个人喜好随便命名），并双击状态 1 1 进入编

2、辑；3 3、点击状态 1 1 里面的矩形，设置大小与网站页面大小相同，以便完全遮盖；然后，设置矩形边框为无”；最后设置填充色的透明度为50%50% （看个人喜好），并选择填充色为灰色（看个人喜好）；4 4、关闭状态 1 1 编辑页面，选择另外一个动态面板，按照第 2 2 步命名并进入编辑;5 5、设置里面的矩形为合适大小，并拖入一个按钮（或者矩形/ /文本面板）作为关闭按钮;设置按钮 onon clickclick 事件为隐藏遮罩层和当前编辑的这个动态面板;mM 1=丨 ND * ig 料肩rs-VlLWJCrsB MM6 6、关闭当前的编辑页面，再次选择作为对话框的这个面板一右键一编辑选项一固定到 浏览器;D-a- dc* WSBflSw*世ar态FJ盼贬鼻瞎*mz77n*aa7 7、勾选固定到浏览器窗口，水平和垂直都选择居中，并勾选“保持在前面”；8 8、 拖入一个按钮（或者矩形/ /文本面板）到编辑区，双击输入文字“登录”；然后点右 键一顺序一置于底层；9 9、按着 CtrlCtrl 选择两个动态面板（或者挨个设置），点右键一编辑选项一设为隐藏。1010、好了，生成原型就能看到效果了。扩展：固定到浏览器选项可以让动态面板无论页面怎么滚动，总是停留在一个位置，那么网站两侧的对联广告，或者浮在页面上的一些按钮、图片等，都能用这种方式来实现。