【XSTAR原型设计】Bootstrap弹窗效果原型图的快速实现

目录

1. 准备工作

2. 操作步骤

2.1 放置一个按钮元件和一个弹窗元件

2.2 将弹窗元件设置为隐藏

 2.3 设置按钮点击事件,以触发弹窗动作

2.4 在元素变换设置窗口中,将弹窗的隐藏选项去掉

 2.5 新建一个子页面,作为弹窗中的子页面

2.6 设置子页面的内容

 2.7 将子页面设置为弹窗的子页面

 2.8 预览效果(单击按钮,弹出弹窗)


1. 准备工作

安装XSTAR2022.2.20版软件,或更高版本的XSTAR软件。

2. 操作步骤

2.1 放置一个按钮元件和一个弹窗元件

【XSTAR原型设计】Bootstrap弹窗效果原型图的快速实现

2.2 将弹窗元件设置为隐藏

【XSTAR原型设计】Bootstrap弹窗效果原型图的快速实现

 2.3 设置按钮点击事件,以触发弹窗动作

【XSTAR原型设计】Bootstrap弹窗效果原型图的快速实现

2.4 在元素变换设置窗口中,将弹窗的隐藏选项去掉

 【XSTAR原型设计】Bootstrap弹窗效果原型图的快速实现

 2.5 新建一个子页面,作为弹窗中的子页面

【XSTAR原型设计】Bootstrap弹窗效果原型图的快速实现

2.6 设置子页面的内容

【XSTAR原型设计】Bootstrap弹窗效果原型图的快速实现

 

 2.7 将子页面设置为弹窗的子页面

【XSTAR原型设计】Bootstrap弹窗效果原型图的快速实现

 2.8 预览效果(单击按钮,弹出弹窗)

【XSTAR原型设计】Bootstrap弹窗效果原型图的快速实现

 

 

上一篇:Android 动画深入分析(一)——逐帧动画,补间动画


下一篇:『迷你教程』机器学习的Bootstrap及Python实现