Overlay 基本示例。
目标元素1定位在基准元素1的右边,高宽分别为30/100,底色红色。
var Overlay = FNX.include('overlay/overlay');
var o = new Overlay({
template: "<div class='overlay'>目标元素1</div>",
parentNode: '#c',
id: 'myoverlay',
style: {
color: '#fff'
},
align: {
selfXY: ['-100%', 0],
baseElement: '#a',
baseXY: [0, 0]
}
});
o.show();
o.set('style', {
backgroundColor: '#f53379'
});
o.set('height', 40);
目标元素2,宽80高30,位置为可视区域top:0 left:200。
var Overlay = FNX.include('overlay/overlay');
var o2 = new Overlay({
element: '#b',
width: 100,
align: {
baseXY: [200, 0]
}
});
o2.show();
请改变本窗口的大小并观察一下目标元素1、2的位置。