Create Dynamic Bootstrap 5/4 Dialogs With JavaScript

File Size: 11.6 KB
Views Total: 1487
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Create Dynamic Bootstrap 5/4 Dialogs With JavaScript

A simple JavaScript (jQuery) extension to Bootstrap frameworks that allows users to dynamically create multifunctional Bootstrap 4 modals without having to write any HTML code.

How to use it:

1. Download the package and insert the core JavaScript bootstrap4dialog.js into your Bootstrap 4 project.

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

2. Create a basic dialog with title and message.{
  title: 'Sample Title 1', 
  message: 'Message text goes here'

3. Create a toast-like notification box that automatically dismisses after 3 seconds.{
  message: 'Toast Message Here', 
  duration: 5

4. Create a modal window with custom buttons. Ideal for alert & confirmation dialog boxes.{
  title: 'Confirm Dialog',
  message: 'Are You Sure',
  buttons: [{
    id: 'btn-cancel',
    label: 'Cancel',
    cssClass: 'btn btn-light',
    action: function(dialog) {
    id: 'btn-submit',
    label: ' Submit',
    cssClass: 'btn btn-sm btn-danger',
    action: function(dialog) {
      alert('fake form submittion..');

5. Specify the type of the modal. All possible types:

Bootstrap4Dialog.TYPE_PRIMARY = "primary";
Bootstrap4Dialog.TYPE_SECONDARY = "secondary";
Bootstrap4Dialog.TYPE_SUCCESS = "success";
Bootstrap4Dialog.TYPE_DANGER = "danger";
Bootstrap4Dialog.TYPE_WARNING = "warning";
Bootstrap4Dialog.TYPE_INFO = "info";
Bootstrap4Dialog.TYPE_LIGHT = "light";
Bootstrap4Dialog.TYPE_DARK = "dark";{
  type: Bootstrap4Dialog.TYPE_LIGHT

6. Determine the size of the action buttons. All possible size options:

Bootstrap4Dialog.SIZE_SMALL = "modal-sm";
Bootstrap4Dialog.SIZE_MEDIUM = "";
Bootstrap4Dialog.SIZE_LARGE = "modal-lg";
Bootstrap4Dialog.SIZE_EXTRA_LARGE = "modal-xl";{
  size: Bootstrap4Dialog.SIZE_SMALL

7. Determine whether to show the backdrop. All possible options:

Bootstrap4Dialog.BACKDROP_YES = "true";
Bootstrap4Dialog.BACKDROP_NO = "";
Bootstrap4Dialog.BACKDROP_STATIC = "static";{
  backdrop: Bootstrap4Dialog.BACKDROP_NO

8. Determine whether to allow the 'Scrollable' behavior on the modal. Default: false.{
  scrollable: true

9. Determine whether to automatically destroy the modal after hidden. Default: true.{
  autodestroy: false

10. Trigger custom functions when the modal is closed and hidden. Default: true.{
  open: function() {
    // do something
  close: function() {
    // do something

11. Close the modal manually.




  • fix close button compatibility with Bootstrap 5, which is not compatible with Bootstrap 4

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