配置

配置为一个 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>'
  // ...
};