Overlay

Overlay 基本示例。

1. 基本浮层

目标元素1定位在基准元素1的右边,高宽分别为30/100,底色红色。

基准元素1
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. 全局定位浮层

目标元素2,宽80高30,位置为可视区域top:0 left:200。

目标元素2
var Overlay = FNX.include('overlay/overlay');

var o2 = new Overlay({
    element: '#b',
    width: 100,
    align: {
        baseXY: [200, 0]
    }
});
o2.show();

3. 窗口大小变化时重新定位(被动特性)

请改变本窗口的大小并观察一下目标元素1、2的位置。