Bootstrap 4 Modal Wrapper Plugin With jQuery

This Bootstrap modal wrapper factory jQuery plugin makes it easier to create Bootstrap 4 powered modal windows and dialog boxes with additional features.

Features:

• 3 predefined modal types: notification, alert and confirm dialog.
• Allows you to update modal content dynamically.
• Supports loading modal content from external data sources via AJAX.
• Allows to open multiple modal windows at a time.

How to use it:

1. Load the needed jQuery JavaScript library and Bootstrap 4 framework in the document.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous"></script>

2. Download and put the JavaScript file bootstrap-modal-wrapper-factory.min.js after jQuery.

<script src="bootstrap-modal-wrapper-factory.min.js"></script>

3. Create a notification popup with custom message.

BootstrapModalWrapperFactory.showMessage("Delfault Message to show to user");

4. Create an alert dialig with custom message.

BootstrapModalWrapperFactory.alert("Delfault alert <b>with only message</b>");

5. Create a confirmation dialig with custom message and confirm/cancel callbacks.

BootstrapModalWrapperFactory.confirm({
  // defaults
  title: "Confirm",
  message: "Are You Sure ?",
  closable: false,
  closeByBackdrop: false,
  closeByKeyboard: false,
  buttons: [
    {
        label: "No",
        cssClass: "btn btn-secondary",
        action: function (modalWrapper, button, buttonData, originalEvent) {
            modalWrapper.hide();
            if (options.onConfirmCancel && (typeof options.onConfirmCancel === "function")) {
                options.onConfirmCancel();
            }
        }
    },
    {
        label: "Yes",
        cssClass: "btn btn-primary",
        action: function (modalWrapper, button, buttonData, originalEvent) {
            modalWrapper.hide();
            if (options.onConfirmAccept && (typeof options.onConfirmAccept === "function")) {
                options.onConfirmAccept();
            }
        }
    }
  ]
});

6. Create an AJAX modal that loads content from an external URL.

BootstrapModalWrapperFactory.createAjaxModal({
  message: '<div class="text-center">Loading</div>',
  closable: true,
  title: "AJAX Content",
  closeByBackdrop: false,
  url: "blank-ajax-response.html"
});

7. Create a complex modal dialog using the createModal method. Check out the demo page for more details.

BootstrapModalWrapperFactory.createModal({
  // defaults
  title: "Alert",
  message: "",
  closable: true,
  closeByBackdrop: true,
  closeByKeyboard: true,
  buttons: [
    {
        label: "OK",
        cssClass: "btn btn-primary",
        action: function (modalWrapper, button, buttonData, originalEvent) {
            modalWrapper.hide();
        }
    }
  ]
});

Changelog:

2020-05-30

• added dialog methods to disable / enable buttons

2019-07-06

• solve the bug when create a dialog modal with modal-xl size

2019-07-04

• solve the bug when create a dialog modal with modal-xl size

2019-06-30

• update dependencies and Support bs modal xl size

2019-01-01

• publish new centered modal feature

2018-10-30

• update createAjaxModal by calling ajax after the modal has been shown using event and make the modal body scrollable for remote ajax content

2018-09-09

• Provide a method to update Bootstrap Modal backdrop by using updateClosableByBackdrop(true | false);

---

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