如何使用Axure:[7]制作弹出窗口Modal

 时间:2024-11-09 05:43:21

当我们制作网站模型时,很容易就会遇到弹出窗口,一般情况下,在前端框架中,这种效果叫Modal。

工具/原料

Axure

准备

1、打开Axure,创建一个新的RP文件

如何使用Axure:[7]制作弹出窗口Modal

2、拖入一个矩形,用于触发Modal弹出

如何使用Axure:[7]制作弹出窗口Modal

3、拖入一个矩形,并转换为动态面板,并命名为ModalPane

如何使用Axure:[7]制作弹出窗口Modal

4、进入ModalPane的咽疖纲掇状态state1中,设置已经存在的矩形的边框为「无边框」,设置其背景色为灰色,透明度为30%

如何使用Axure:[7]制作弹出窗口Modal

5、添加一个矩形,作为弹出Modal,将其转换为动态面板

如何使用Axure:[7]制作弹出窗口Modal

6、进入到Modal的状态编辑界面,并绘制Modal的内容

如何使用Axure:[7]制作弹出窗口Modal

添加事件

1、在Modal动态面板中,为关闭按钮添加关闭事件

如何使用Axure:[7]制作弹出窗口Modal如何使用Axure:[7]制作弹出窗口Modal

2、设置ModalPane的可见属性为隐藏

如何使用Axure:[7]制作弹出窗口Modal

3、为「触发」按钮添加显示ModalPane的事件

如何使用Axure:[7]制作弹出窗口Modal

完成

1、按F5进行预览

如何使用Axure:[7]制作弹出窗口Modal
  • 教大家使用Axure制作按钮样式的多选框效果
  • Axure创建日期型输入框
  • Axure调整文本行高教程
  • 如何利用Axure RP 8设计多选列表框
  • Axure RP8中列表框的使用
  • 热门搜索
    祟怎么读 胆囊结石怎么治疗 吸收不好怎么办 肉圆怎么做好吃 气管炎怎么治 本科英语怎么说 淘宝开店怎么上传宝贝 顿时的近义词 坎坷的近义词 中分发型图片