Overlay

悬浮的对话框
KISSY.use('overlay',function(S,Overlay){
    // use Overlay
});

Class

Class Detail

class overlay.Overlay
Overlay (config)
xclass: ‘overlay’
继承自

Control

Align ,

包含其全部配置,属性,方法,事件.

Parameters:config (Object) – 配置项, 详细见下方 Configs Detail .

Note

使用前请加上初始样式

<style>
    .ks-overlay {
        position:absolute;
        left:-9999px;
        top:-9999px;
    }
    .ks-overlay-hidden {
        visibility: hidden;
    }

    .ks-overlay-mask-hidden {
        display: none;
    }

    .ks-overlay-shown {
        visibility: visible;
    }

    .ks-overlay-mask-shown{
        display: block;
    }
</style>

Configs Detail

Overlay.config.effect

{Object} - 可选, 显示或隐藏时的特效支持, 对象包含以下配置:

Overlay.config.effect.target

{String|KISSY.Node} - 可选,动画的参考元素.

Overlay.config.effect.effect

{String} - 可选. 可取值 ‘fade’(渐隐显示), ‘slide’(滑动显示).

Overlay.config.effect.easing

{String} - 可选, 同 KISSY.Anim 的 easing 参数配置.

Overlay.config.effect.duration

{Number} - 可选, 动画持续时间, 以秒为单位.

例如:

{
    target:'',        // {String|KISSY.Node} - 可选,动画的参考元素
    effect:'none',    // {String} - 可选, 默认为'none', 'none'(无特效), 'fade'(渐隐显示), 'slide'(滑动显示).
    easing:'',        // {String} - 可选, 同 KISSY.Anim 的 easing 参数配置.
    duration:3        // {Number} - 可选, 动画持续时间, 以秒为单位.
}
Overlay.config.closable

{Boolean} - 对话框右上角是否包括关闭按钮

Overlay.config.closeAction

{String} - 点击关闭按钮的动作。默认 “hide” 隐藏,也可设置 “destroy” 销毁该组件.

Overlay.config.mask

{Boolean|Object} - 组件显示时是否使用遮罩层盖住页面其他元素

Overlay.config.mask.closeOnClick

{Boolean} - 可选. 点击遮罩层是否关闭 overlay. (具体隐藏或销毁依赖 closeAction)

Overlay.config.mask.effect

{String} - 可选. 遮罩层显示隐藏效果. (取值 ‘fade’,’slide’)

Overlay.config.mask.duration

{Number} - 可选. 效果持续时间. 单位秒

Attributes Detail

Overlay.prototype.closable

{Boolean} - 设置后显示或隐藏关闭按钮.

Overlay.prototype.maskNode

{KISSY.Node} - 遮罩层节点.

Methods Detail

Overlay.prototype.loading()
loading ()
生成一个加载盖住当前组件内容
Overlay.prototype.unloading()
unloading ()
隐藏生成的加载层

Note

KISSY 1.4 srcNode 初始化组件时必须要求内容节点必须包含类名 ks-overlay-content (这里 ks- 为 prefixCls),例如

<div class="ks-overlay" id='t'>
    <div class="ks-overlay-content">

    </div>
</div>

<script>
    new Overlay({
        srcNode:'#t'
    });
</script>