jQuery Plugin To Manage Bootstrap 4 Modal Component - Modal.js

File Size: 7.13 KB
Views Total: 3443
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
jQuery Plugin To Manage Bootstrap 4 Modal Component - Modal.js

Modal.js is a lightweight jQuery plugin used to manage and enhance the default Bootstrap 4 modal component with custom HTML content, actions buttons, height/width and AJAX form submitting.

How to use it:

1. Include the necessary Bootstrap 4's core style sheet in the header of the html page.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">

2. Include the latest version of jQuery library and the jQuery Modal.js script on the webpage.

<script src="//code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="modal.js"></script>

3. The JavaScript to create a basic Bootstrap modal window on the webpage.

<button type="button" 
        Custom Template
  var dialog = new Dialog({
    triggerEle: "#createDefaultDialog"

4. The JavaScript to create a Bootstrap modal window with custom data template.

<button type="button" id="createDefaultDialog">Basic</button>
var dialog2 = new Dialog({
  titleText: 'Dialog Title',
  showFooter: false

function contentTpl() { 
<table class="table table-striped table-bordered">
    <tr><th colspan="2">Logs</th></tr>
      <td class="text-right" style="width:120px">Gate:</td><td>{{gate}}</td>
      <td class="text-right" style="width:120px">ID:</td><td>{{transId}}</td>
      <td class="text-right" style="width:120px">Type:</td><td>{{bizType}}</td>
      <td class="text-right" style="width:120px">Amount:</td><td>{{amount}}</td>
      <td class="text-right" style="width:120px">Status:</td><td>{{orderCorrectStatus}}</td>

$('#viewDialog').on('click', function(){
  var data = $(this).data('itemData'),
  dialogContentEle = $(dialog2._build(dialog2._getDoc(contentTpl), data));

4. Create an AJAX form modal with the 'ajaxSubmitSuccess' event.

<button type="button" id="eventDialog">AJAX FORM</button>
var dialog3 = new Dialog();

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

$('#eventDialog').on('click', function(){
  var dialogContentEle = $(dialog5._build(dialog5._getDoc(contentTpl4), null));

// reload the page
$(document).on('ajaxSubmitSuccess', function(){

5. Feel free to customize the Bootstrap modal using the following settings.

width: "600px",
height: "auto",
titleText: "Modal Title",
content: "",
confirmBtnText: "Confirm",
cancelBtnText: "Cancel",
showFooter: true,
triggerEle: "" // jquery selector

Change log:


  • remove unnecessary return

This awesome jQuery plugin is developed by Vivi-wu. For more Advanced Usages, please check the demo page or visit the official website.