Popup 页内弹出框

Popup 提供页面弹出框功能,是一个自定义元素。Popup 可以理解为是一个浮动 DIV 层,在元素内可以嵌套任何 HTML 元素。标签名 POP-UP,中横线必须有,对应的元素类为 HTMLPopupElement。

这个组件第一个版本诞生于 2006 年,期间已经过多次演进。

属性、方法和事件

Popup 可用的属性如下:

可用的方法有:

可用的事件有:

示例如下:

窗口模式

属性position-xposition-y的位置针对整个窗口,如分别设置为lefttop让整个窗口显示在窗口的左上角。

边栏模式

边栏模式下,position-x设置为leftright时为左右边栏,position-y设置为topbottom时为上下边栏。上下边栏会自动调整 Popup 宽度为整个窗口宽度;左右边栏会自动调整 Popup 高度为整个窗口高度。X 轴设置优先于 Y 轴,即只要 X 轴不是center时,Y 轴默认为middle,其他设置值无效。边栏模式下默认禁用滚动条。

菜单模式

菜单模式下,position-xposition-y的位置不再相对于窗口,而是reference属性设置的参考元素。left相对于参考元素左对齐,center与参考元素居中对齐,right相对于参考元素右对齐,top让 Popup 显示在参考元素上方,bottom让 Popup 显示在参考元素下方,middle设置无效。

对话框

基于 Popup,标签库实现了对应三种 window 对话框的新弹出框,用于标签库内部使用。三种对话框均返回一个 Popup 对象。

对话的每个参数除可传入字符串外,都支持传入对象类型以对每一项进行更多设置。

动画属性

Popup 支持自定义打开和关闭时的动画,动画元素由位置、缩放比例和透明度三个元素构成,不支持旋转角度设置。可用的属性有:


参考链接


微信公众号
码农老吴  |  星源工作室  |  开发月志  |  问题反馈
联系我们:wu@qross.io     手机/微信:18618171102
京 ICP 备 20027445 号
$(h1)!