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

Yet another Bootstrap 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 (Bootstrap 5 Version):

1. Import the bootstrap-show-modal.js as a module into your Bootstrap 5 project.

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

<script type="module">
  import "./src/ShowModal.js"
</script>

2. Create custom modals & dialog boxes with the following syntax.

// Alert
bootstrap.showAlert({
  title: "Alert Popup", 
  body: "This is an alert popup"
})

// Confirm
bootstrap.showConfirm({
  title: "Confirm Dialog", 
  body: "Are You Sure", 
  textTrue: "Okey", 
  textFalse: "Cancel",
  onSubmit: function (result) {
    if (result) {
      bootstrap.showAlert({title: "Result: " + result, body: "You like cats."})
    } else {
      bootstrap.showAlert({title: "Result: " + result, body: "You don't like cats."})
    }
  },
  onDispose: function () {
    console.log("The confirm dialog vanished")
  }
})

// Modal
bootstrap.showModal({
  title: "Modal Window", 
  body: "This is a basic modal window"
})

3. Available options & callback functions.

bootstrap.showModal({

  // modal title
  title: "",

  // modal body
  body: "",

  // modal footer
  footer: "", 

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

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

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

  // make the dialog draggable
  draggable: false, 

  // 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){}
  
})

How to use it (Bootstrap 4 Version):

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.

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

4. The JavaScript to create a basic modal window.

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

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

$.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: "", 

  // additional css for ".modal-header"
  headerClass: "", 

  // additional css for ".modal-body"
  bodyClass: "", 

  // data-bs-theme
  theme: undefined, 

  // Bootstrap modal's options
  options: {
    backdrop: 'static' 
  },

  // 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:

v6.0.8 (2024-02-23)

• bugfixes

v6.0.5 (2024-02-05)

• added headerClass, bodyClass, footerClass props

v6.0.3 (2024-02-05)

• removed resizeable and draggable
• updated package
• updated doc

v5.1.3 (2023-07-28)

• added this.context = this.element

v5.1.3 (2023-07-28)

• added this.context = this.element

v5.1.1 (2022-08-10)

• added code for "resizeable", but does not work as expected for now

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.