含有遮罩层的对话框，用于模拟浏览器的alert、confirm和prompt。

模态对话框通过遮罩层来阻止用户的其他行为。

代码演示

基本形式

<button class="u-btn u-btn-primary" on-click={this.show()}>Modal</button>
var component = new JRUI.Component({
    template: template,
    show: function() {
        var modal = new JRUI.JRModal({
            data: {
                lang: 'en-US',
                content: 'Modal内容'
            }
        });
    }
});

Disable

<button class="u-btn u-btn-primary" on-click={this.show()}>Modal</button>
var component = new JRUI.Component({
    template: template,
    show: function() {
        var modal = new JRUI.JRModal({
            data: {
                lang: 'en-US',
                okDisabled: true,
                cancelDisabled: true,
                cancelButton: true,
                content: 'Modal内容'
            }
        });
    }
});
<button class="u-btn u-btn-primary" on-click={this.show()}>Modal</button>
var component = new JRUI.Component({
    template: template,
    show: function() {
        var modal = new JRUI.JRModal({
            data: {
                lang: 'en-US',
                hasFooter: false,
                content: 'Modal内容'
            }
        });
    }
});

禁止关闭

<button class="u-btn u-btn-primary" on-click={this.show()}>Modal</button>
var component = new JRUI.Component({
    template: template,
    show: function() {
        var modal = new JRUI.JRModal({
            data: {
                lang: 'en-US',
                isCanClose: false,
                content: 'Modal内容'
            }
        });
    }
});

Alert

<button class="u-btn u-btn-error" on-click={this.show()}>Alert</button>
var component = new JRUI.Component({
    template: template,
    show: function() {
        JRUI.JRModal.alert('Alert内容');
    }
});

Confirm

<button class="u-btn u-btn-success" on-click={this.show()}>Confirm</button>
var component = new JRUI.Component({
    template: template,
    show: function() {
        JRUI.JRModal.confirm('Confirm内容');
    }
});

API

Classes

JRModal

Constants

Component

JRModal 模态对话框

Functions

config()
init()
close(result) 关闭对话框(result) ⇒ void
ok() 确定对话框() ⇒ void
cancel() 取消对话框() ⇒ void
title]) 弹出一个alert对话框。关闭时始终触发确定事件。([content], [title]) ⇒ Modal
title]) 弹出一个confirm对话框([content], [title]) ⇒ Modal

Events

“close 关闭对话框时触发”
“ok 确定对话框时触发”
“cancel 取消对话框时触发”

JRModal

Kind: global class
Extend: Component

new JRModal()

Param Type Default Description
[options.data] object = 绑定属性 Binding Properties
[options.data.title] string "提示" => 对话框标题 Title of Dialog
[options.data.content] string => 对话框内容
[options.data.contentTemplate] string => 对话框内容模板，用于支持复杂内容的自定义。
[options.data.footerTemplate] string => 对话框底部模板
[options.data.okDisabled] boolean false => Disale 确认按钮
[options.data.cancelDisabled] boolean false => Disale 取消按钮
[options.data.hasFooter] boolean true => 是否显示 footer
[options.data.isCanClose] boolean true => 是否允许取消关闭
[options.data.okButton] string | boolean true => 是否显示确定按钮。值为string时显示该段文字。
[options.data.cancelButton] string | boolean false => 是否显示取消按钮。值为string时显示该段文字。
[options.data.class] string => 补充class
[options.data.noClose] boolean => ok时是否关闭弹窗
[options.data.minHeight] number => 内容区域最小高度
[options.data.maxHeight] number => 内容区域最大高度，超出则显示滚动条

Component

JRModal 模态对话框

Kind: global constant

Author: sensen(rainforest92@126.com)

config()

Kind: global function
Access: protected

init()

Kind: global function
Access: protected

close(result) 关闭对话框(result) ⇒ void

Kind: global function
Access: public

Param Type Description
result boolean 点击确定还是取消

ok() 确定对话框() ⇒ void

Kind: global function
Access: public

cancel() 取消对话框() ⇒ void

Kind: global function
Access: public

“close 关闭对话框时触发”

Kind: event emitted
Properties

Name Type Description
result boolean 点击了确定还是取消

“ok 确定对话框时触发”

Kind: event emitted

“cancel 取消对话框时触发”

Kind: event emitted

← 遮罩 通知 →