Create Dynamic Bootstrap 5/4 Modals In jQuery - bootstrap-show-modal.js

Yet another Bootstrap 4 modal wrapper plugin which lets you create beautiful, responsive, dynamic alert/confirm dialog boxes and complex modal windows using Bootstrap 5 or Bootstrap 4 modal component.

How to use it:

1. To use the plugin start with loading the latest jQuery library and Bootstrap framework in the document.

<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/cdn/bootstrap.min.js"></script>

2. Load the JavaScript bootstrap-show-modal.js after jQuery library and we're ready to go.

<script src="src/bootstrap-show-modal.js"></script>

3. The JavaScript to create an alert popup with an OK button.

$.Modal.alert({
  title: "Alert Popup", 
  body: "This is an alert popup"
})

4. The JavaScript to create a basic modal window.

$.Modal.show({
  title: "Modal Window", 
  body: "This is a basic modal window"
})

5. The JavaScript to create a confirmation dialog with confirm/cancel actions.

$.Modal.confirm({
  title: "Confirm Dialog", 
  body: "Are You Sure", 
  textTrue: "Okey", 
  textFalse: "Cancel",
  confirmed: function (result) {
    if (result) {
      // do something
    } else {
      // do something
    }
  },
  hidden: function () {
    // do something
  }
})

6. All default options.

{

  // modal title
  title: "",

  // modal body
  body: "",

  // modal footer
  footer: "", 

  // additional CSS class(es)
  modalClass: "fade",

  // additional CSS class(es) for ".modal-dialog"
  modalDialogClass: "", 

  // Bootstrap 4 modal's options
  options: {
    backdrop: 'static' // disallow closing on click in the background
  },

  // called after created
  onCreate: null,

  // called after the modal was shown and completely faded in
  onShown: null, 

  // called after disposed
  onDispose: null,

  // called after confirmed
  // $.showConfirm only
  onSubmit: function(result, modal){}
  
}

Changelog:

v5.0.2 (2022-08-10)

• Updated Bootstrap 5 version

v5.0.0 (2022-08-06)

• Removed jQuery dependency from Bootstrap 5 version.

v3.0.3 (2022-01-21)

• Fixed Bootstrap 5 version.

v3.0.2 (2021-12-11)

• Added Bootstrap 5 version.

v1.4.3 (2021-07-24)

• setting "backdrop: 'static'" as default

v1.4.2 (2021-01-19)

• fixed bug this => self

v1.3.7 (2020-10-08)

• package updated

v1.3.6 (2020-08-05)

• JS updated

v1.3.0 (2020-07-28)

• API changed reverted

v1.2.2 (2020-07-24)

• API changed

v1.1.20 (2020-07-07)

• added btn-cancel class

v1.1.18 (2020-04-03)

• changed callback `onSubmit(result)` to `onSubmit(result, modal)`

v1.1.17 (2019-02-26)

• Better IE support, without polyfill.

v1.1.12 (2018-11-23)

• Made the fade effect default

 

---

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