Bootstrap v4 Modal with dynamic content

jQuery 实现 Boostrap 样式的内容可定制的 Modal

默认弹窗

弹窗组件默认包含：标题、头部关闭按钮、内容区域（空）、底部取消按钮（功能同“关闭”按钮）和确认按钮（实现 ajax 表单提交）。

<!-- HTML -->
<button type="button" class="btn btn-secondary" id="createDefaultDialog">触发默认弹窗</button>

// JavaScript
$(function(){
  var dialog = new Dialog({
    triggerEle: "#createDefaultDialog"
  });
})

详情弹窗

定制弹窗标题，填充自定义主体内容，移除底部按钮

<!-- HTML -->
<button type="button" class="btn btn-primary" id="viewDialog" data-item-data="{"gate":"IcbcZJ","transId":"6666","orderCorrectStatus":"success","amount":"0.00","bizType":"WITHDRAW_BATCH"}">触发详情弹窗</button>

// JavaScript
var dialog2 = new Dialog({
  titleText: '待审核记录详情',
  showFooter: false
});

function contentTpl() {  // dialog 主体内容模版：待审核记录详情弹窗
/*!
<table class="table table-striped table-bordered">
  <thead>
    <tr><th colspan="2">差错记录</th></tr>
  </thead>
  <tbody>
    <tr>
      <td class="text-right" style="width:120px">网关:</td><td>{{gate}}</td>
    </tr>
    <tr>
      <td class="text-right" style="width:120px">流水号:</td><td>{{transId}}</td>
    </tr>
    <tr>
      <td class="text-right" style="width:120px">业务类型:</td><td>{{bizType}}</td>
    </tr>
    <tr>
      <td class="text-right" style="width:120px">金额:</td><td>{{amount}}</td>
    </tr>
    <tr>
      <td class="text-right" style="width:120px">目标状态:</td><td>{{orderCorrectStatus}}</td>
    </tr>
  </tbody>
</table>
*/
}

$('#viewDialog').on('click', function(){
  var data = $(this).data('itemData'),
  dialogContentEle = $(dialog2._build(dialog2._getDoc(contentTpl), data));
  dialog2
    .insertDialogContent(dialogContentEle.get(0).outerHTML)
    .show()
})

以上方案的实现，需保证<button>元素的data-item-data中的特殊字符"（双引号）使用 HTML Entity code 代替，如下：

或者先把 JS 对象转为 JSON string，填充模板的时候再转为 JS 对象。

// JavaScript
var testData = {"id":"20161014170003330003","recordStatus":"待审核","operateTime":"2016-10-14","operator":"Vivienne","operateNote":"132","gate":"IcbcZJ","transId":"6666","orderCorrectStatus":"success","amount":"0.00","bizType":"WITHDRAW_BATCH"};

$('#viewDialog')
  .data('itemData', JSON.stringify(testData))
  .on('click', function(){
    var data = $(this).data('itemData'),
    dialogContentEle = $(dialog2._build(dialog2._getDoc(contentTpl), JSON.parse(data)));
    dialog2
      .insertDialogContent(dialogContentEle.get(0).outerHTML)
      .show()
  })

默认提交弹窗

所有包裹在弹窗内容模板中 <form> 元素里，且设置了 name 特性值的字段（输入域）都将被提交。

<!-- HTML -->
<button type="button" class="btn btn-primary" id="submitDialog">触发默认提交弹窗</button>

// JavaScript
var dialog3 = new Dialog({
  titleText: '审核',
  width: '800px'
});

function contentTpl2() {
/*!
<form action="/action.htm">
  <div class="alert alert-danger" role="alert" style="display:none;"></div>
  <label>备注</label>
  <textarea class="form-control" name="note" rows="5"></textarea>
</form>
*/
}

$('#submitDialog').on('click', function(){
  var dialogContentEle = $(dialog3._build(dialog3._getDoc(contentTpl2), null));
  dialog3
    .resetConfirmBtnText('审核通过')
    .insertDialogContent(dialogContentEle.get(0).outerHTML)
    .show()
})

自定义提交弹窗

有时除了表单里的字段，还需要向后台提交额外的数据，如：审核是否通过的标志位。这种情况下需要自定义提交数据，并手动调用弹窗的提交函数。

<!-- HTML -->
<button type="button" class="btn btn-primary" id="mySubmitDialog">触发自定义提交弹窗</button>

// JavaScript
var dialog4 = new Dialog({titleText: '审核'});

function contentTpl3() {
/*!
<form action="/action.htm">
  <div class="alert alert-danger" role="alert" style="display:none;"></div>
  <label>备注</label>
  <textarea class="form-control" name="note" rows="5"></textarea>
</form>
*/
}

$('#mySubmitDialog').on('click', function(){
  var dialogContentEle = $(dialog4._build(dialog4._getDoc(contentTpl3), null));
  dialog4
    .resetDialogFooter('<button type="button" data-action-type="pass" class="btn btn-primary">通过</button> <button type="button" data-action-type="reject" class="btn btn-danger">驳回</button> <button type="button" data-dismiss="modal" class="btn btn-secondary">取消</button>')
    .insertDialogContent(dialogContentEle.get(0).outerHTML)
    .show()
})

//绑定弹窗中 审核按钮事件
dialog4.on('click', '[type="button"]', function() {
  var $this = $(this),
  actionType = $this.data("actionType"),
  toSendData = dialog4.$element.find('form').serializeArray()
  //审核弹框
  if (actionType) {
    switch (actionType) {
      case 'pass':
        toSendData.push({
          name: "auditStatus",
          value: "AUDIT_PASS"
        })
        break;
      case 'reject':
        toSendData.push({
          name: "auditStatus",
          value: "AUDIT_REJECT"
        })
        break;
      default:;
    }
    dialog4.ajaxSubmit(null, toSendData)
  }
})

弹窗事件

目前弹窗对外暴露 ajaxSubmitSuccess 事件，通过给该事件绑定处理函数可进行相应操作，比如：成功提交数据后刷新页面。

<!-- HTML -->
<button type="button" class="btn btn-secondary" id="eventDialog">点我看栗子</button>

// JavaScript
var dialog5 = new Dialog();

function contentTpl4() {
/*!
<form action="/action.htm">
  <div class="alert alert-danger" role="alert" style="display:none;"></div>
  <label>备注</label>
  <textarea class="form-control" name="note" rows="5"></textarea>
</form>
*/
}

$('#eventDialog').on('click', function(){
  var dialogContentEle = $(dialog5._build(dialog5._getDoc(contentTpl4), null));
  dialog5
    .insertDialogContent(dialogContentEle.get(0).outerHTML)
    .show()
})

// 表单提交成功刷新页面
$(document).on('ajaxSubmitSuccess', function(){
  location.reload()
})