.popup {
    padding: 20px;
    *zoom:1;
    _float: left;
    position: relative;
    background-color: #FFF;
    border: 1px solid #999;
    outline: 0;
    background-clip: padding-box;
    font-family: Helvetica, arial, sans-serif;
    font-size: 14px;
    line-height: 1.428571429;
    color: #333;
}

var Popup = FNX.include('popup/popup');

var example = new Popup({
    hasMask: false,
    className: 'popup',
    template: '<div>没有遮罩层</div>'
});

$('#example1').click(function () {
    example.show();
});

var Popup = FNX.include('popup/popup');

var example2_1 = new Popup({
    align: {
        baseXY: ['50%', 0],
        selfXY: ['50%', 0]
    },
    className: 'popup',
    template: '<div>位置靠近顶部</div>'
});

var example2_2 = new Popup({
    hasMask: true,
    align: {
        baseElement: '#example2-2',
        baseXY: [0, '100%'],
        selfXY: [0, 0]
    },
    className: 'popup',
    template: '<div>位置在本按钮下方</div>'
});


$('#example2-1').click(function () {
    example2_1.show();
});

$('#example2-2').click(function () {
    example2_2.show();
});