弹框组件主要的实现思路是利用动态面板可以在多个状态下切换的原理,在一个状态下添加弹框内容,另一个状态下不添加任何内容且隐藏动态面板实现弹框。
实现步骤:
-
先添加一个按钮,点击按钮切换动态面板的状态,实现显示弹框
-
再添加一个动态面板,给该面板设置两个状态,一个是hideStatus,一个是showStatus。在showStatus状态下添加弹框的内容。
-
点击按钮时设置动态面板的状态为showStatus
-
此时动态面板的状态发生改变,在动态面板属性中“状态发生改变”时做判断。
如果动态面板的状态为showStatus,显示showStatus的内容到顶层,并添加灯箱效果。
如果动态面板的状态为hideStatus,隐藏动态面板。
网友评论