Dialog

对话框.
扩展于 Overlay
KISSY.use('overlay',function(S,Overlay){
    // use Overlay.Dialog
});

Class

Configs

除了 Overlay 的所有配置之外还有:

Attributes

除了 Overlay 的所有属性之外还有:

Methods

Events

Class Detail

class overlay.Dialog
Dialog (config)
xclass: ‘dialog’
继承自 Overlay 包含其全部配置,属性,方法,事件.
Parameters:config (Object) – 配置项, 详细见下方 Configs Detail .

对话框的 DOM 结构为:

<div class='dialog'> <!-- 对话框根节点 -->
    <div class='content'> <!-- 对话框内容节点 -->
        <div class='header'> <!-- 对话框标题节点 -->
        </div>

        <div class='body'> <!-- 对话框体节点 -->
        </div>

        <div class='footer'> <!-- 对话框底部节点 -->
        </div>
    </div>
</div>

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

Dialog.config.headerContent

{String} - 组件的标题 html.

Dialog.config.escapeToClose

{String} - 默认 true. escape 键是否触发 close 动作.

Dialog.config.bodyContent

{String} - 组件的体 html.

Dialog.config.footerContent

{String} - 组件的底部 html.

Dialog.config.headerStyle

{Object} - 组件的标题内联样式.

Dialog.config.bodyStyle

{Object} - 组件体的内联样式.

Dialog.config.footerStyle

{Object} - 组件的底部内联样式.

Attributes Detail

Dialog.prototype.header

{KISSY.Node} - 只读, 组件的头部节点.

Dialog.prototype.body

{KISSY.Node} - 只读, 组件的体部节点.

Dialog.prototype.footer

{KISSY.Node} - 只读, 组件的底部节点.

Dialog.prototype.headerContent

{String} - 可读写. 组件的标题 html.

Dialog.prototype.bodyContent

{String} - 可读写. 组件的体 html.

Dialog.prototype.footerContent

{String} - 可读写. 组件的底部 html.

Note

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

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

    </div>
</div>

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