Bootstrap 4 Modal Enhancemnent Plugin Examples

<!-- HTML -->
<button type="button" class="btn btn-secondary" id="createDefaultDialog">Basic Modal</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"}">Custom Content</button>

// JavaScript
var dialog2 = new Dialog({
  titleText: 'Logs',
  showFooter: false
});

function contentTpl() { 
/*!
<table class="table table-striped table-bordered">
  <thead>
    <tr><th colspan="2">Logs</th></tr>
  </thead>
  <tbody>
    <tr>
      <td class="text-right" style="width:120px">Gate: </td><td>{{gate}}</td>
    </tr>
    <tr>
      <td class="text-right" style="width:120px">ID: </td><td>{{transId}}</td>
    </tr>
    <tr>
      <td class="text-right" style="width:120px">Type: </td><td>{{bizType}}</td>
    </tr>
    <tr>
      <td class="text-right" style="width:120px">Amount: </td><td>{{amount}}</td>
    </tr>
    <tr>
      <td class="text-right" style="width:120px">Status: </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()
})

<!-- HTML -->
<button type="button" class="btn btn-primary" id="submitDialog">Basic Form Modal</button>

// JavaScript
var dialog3 = new Dialog({
  titleText: 'Basic Form Modal',
  width: '800px'
});

function contentTpl2() {
/*!
<form action="/action.htm">
  <div class="alert alert-danger" role="alert" style="display:none;"></div>
  <label>Basic Form Modal</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('Success')
    .insertDialogContent(dialogContentEle.get(0).outerHTML)
    .show()
})

<!-- HTML -->
<button type="button" class="btn btn-primary" id="mySubmitDialog">Custom Form Modal</button>

// JavaScript
var dialog4 = new Dialog({titleText: 'Custom Form Modal'});

function contentTpl3() {
/*!
<form action="/action.htm">
  <div class="alert alert-danger" role="alert" style="display:none;"></div>
  <label>Custom Form Modal</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">Approval</button> <button type="button" data-action-type="reject" class="btn btn-danger">Reject</button> <button type="button" data-dismiss="modal" class="btn btn-secondary">Cancel</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)
  }
})

<!-- HTML -->
<button type="button" class="btn btn-secondary" id="eventDialog">With ajaxSubmitSuccess Event</button>

// JavaScript
var dialog5 = new Dialog();

function contentTpl4() {
/*!
<form action="/action.htm">
  <div class="alert alert-danger" role="alert" style="display:none;"></div>
  <label>With ajaxSubmitSuccess Event</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()
})