配置

配置为一个 JSON 对象，大致形式及说明如下：

var opts_dialog = {
    selector: {
        // 选择器定义
    }
    btn_text: {
        // 按钮文字定义
    },
    tpl: '', // 对话框模板
    btn_tpl: '', // 按钮模板 1.0.1 新增
    input_tpl: '' // 输入框模板 1.0.1 新增
};

• selector 选择器定义
• btn_text 按钮文字定义
• tpl 对话框模板
• btn_tpl 按钮模板
• input_tpl 输入框模板

selector 选择器定义

var opts_dialog = {
    // ...
    selector: {
        modal: '.bg-confirm-modal',
        msg: '.bg-msg',
        cancel: '.bg-cancel',
        confirm: '.bg-confirm',
        ok: '.bg-ok',
        group_confirm: '.bg-group-confirm',
        group_alert: '.bg-group-alert'
    },
    // ...
};

btn_text 按钮文字定义

var opts_dialog = {
    // ...
    btn_text: {
        cancel: 'Cancel',
        confirm: 'Confirm',
        ok: 'OK'
    },
    // ...
};

tpl 对话框模板

此处主要定义显示提交结果的消息，用到 bootstrap 的 modal 组件

请留意模板与 selector 对象的关联

默认值

<div class="modal bg-confirm-modal">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-body">
                <div class="bg-msg"></div>
            </div>
            <div class="modal-footer bg-footer"></div>
        </div>
    </div>
</div>

如：

var opts_dialog = {
    // ...
    tpl: '<div class="modal bg-confirm-modal">' +
        '<div class="modal-dialog modal-dialog-centered">' +
            '<div class="modal-content">' +
                '<div class="modal-body">' +
                    '<p class="bg-msg"></p>' +
                '</div>' +
                '<div class="modal-footer bg-footer"></div>' +
            '</div>' +
        '</div>' +
    '</div>'
    // ...
};

btn_tpl 按钮模板

1.0.1 新增

此处主要定义按钮

请留意模板与 selector 对象的关联

默认值

var opts_dialog = {
    // ...
    btn_tpl: {
        alert: '<button type="button" class="btn btn-primary btn-sm bg-ok" data-dismiss="modal">OK</button>', // alert
        confirm: '<button type="button" class="btn btn-outline-secondary btn-sm bg-cancel bg-group-confirm" data-act="cancel">Cancel</button> <button type="button" class="btn btn-primary btn-sm bg-confirm bg-group-confirm" data-act="confirm">Confirm</button>' // confirm
    },
    // ...
};

input_tpl 输入框模板

1.0.1 新增

此处主要定义输入框

请留意模板与 selector 对象的关联

默认值

var opts_dialog = {
    // ...
    input_tpl: '<div class="form-group"><label class="bg-input-label"></label><input type="text" class="form-control bg-input-control"></div>'
    // ...
};