Overlay 最简单的使用
new S.Overlay(container, config)
当不传入 container , 表示新建 Overlay, 如果传入已有容器, 表示在此容器基础上产生 Overlay.
KISSY.ready(function(S) {
var popup = new S.Overlay({
trigger: '#link',
width: 300,
height: 200
});
});
Config
container - null | String | HTMLElement
Overlay 容器, 默认为 null 时, 表示新建 DOM;
new S.Overlay('#popup1', {});
containerCls - String
容器 class , 默认 class 为 'ks-overlay'.
content - undefined | String
默认为 undefined, 不设置内容.
bdCls - String
body class, 默认为 'ks-overlay-bd'.
trigger - null | String | HTMLElement
触发元素, 默认为 null 时, overlay 动作需要另外 js 指定.
var test = new S.Overlay('#popup1', {
width: 100,
height: 100
});
Event.on('#btn', 'click', function(){
test.show();
});
triggerType - String
触发类型, 'mouse' or 'click', 默认为 'click'.
width - Number
容器宽度, 默认为 0.
height - Number
容器高度, 默认为 0.
zIndex - Number
z-index 值, 默认为9999.
xy - Array
相对 page 定位, 有效值为 [n, m].
align - Object
相对指定 node or viewport 定位, 提供子选项
align: {
// 参考元素, falsy 值为可视区域, 'trigger' 为触发元素, 其他为指定元素
node: null,
// ['tl', 'tr'] 表示 overlay 的 tl 与参考节点的 tr 对齐
points: [POSITION_ALIGN.CC, POSITION_ALIGN.CC],
// 水平, 垂直方向上的偏移, 有效值为 [n, m]
offset: [0,0]
}
align 使用示例
var test = new S.Overlay('#popup2', {
trigger: '#btn1',
triggerType: 'click',
width: 300,
height: 200,
align: {
node: 'trigger',
points: ['tr', 'tl'],
offset: [50, 0]
}
});
mask - Boolean
是否显示遮盖层, 默认为不显示.
shim - Boolean
是否需要垫片, IE6 下默认需要.
Memeber
container - HTMLElement
指向容器元素.
config - Object
如上列出的配置选项.
trigger - HTMLElement
触发元素.
body - HTMLElement
容器 body 元素, 当 content 为空时, 不创建 ks-overlay-bd 层, 且 body 直接指向 container.
shim - HTMLElement
垫片层, 如果选项中 shim 设置为 true.
Methods
show()
显示 Overlay.
hide()
隐藏 Overlay.
move(x, y)
将 Overlay 移动到指定位置上, 绝对位置.
align(node, points, offset)
将 Overlay 定位到指定节点的特定位置上, 如果没有指定 node, 会默认使用 config 中的 align 设置.
center()
将 Overlay 居中到当前可视区域上.
setBody()
设置 body 内容.
Widgets
其他相关
Mask 和 Shim 有自己的配置选项和方法, 相对于 Overlay 独立. 具体如下:
Config: shim: false, // 是 shim 层还是 mask 层 opacity: .6, // 指定 mask 的透明度 style: '' // 指定样式 Member: iframe // shim 和 mask 下都会有, mask 时, 标准浏览器也用 iframe 元素生成mask config // 配置选项 layer // mask时, 且在IE下才会有这个成员, 由于 iframe 不能设置 background, // 所以添加了一个 div 作为 layer , 设置透明度及背景颜色 Method: show() // 显示 hide() // 隐藏 toggle() // 切换显示/隐藏 setSize() // 设置宽高 setOffset() // 设置位置, 绝对位置
更多例子请参见 demo.