Dynamic Bootstrap 4/5 Dialogs With JavaScript

LightBox
Create Dynamic Bootstrap5-4 Dialogs With JavaScript
File Size: 4.7 KB
Views Total: 481 views
Last Update:March 09, 2023
Publish Date: October 22, 2020
Official Website: Go to website
License: MIT
Plugin Author: SUXUMI
Demo    Download

A Free jQuery Plugins with The Dynamic Bootstrap 5/4 Dialog plugin is a lightweight and customizable jQuery extension that allows you to create dynamic dialog boxes for your web pages. With this plugin, you can create dialog boxes that include custom content, such as forms, images, videos, and other HTML elements. The plugin is built on top of the popular Bootstrap framework, which makes it easy to integrate into your existing web projects. It also comes with a variety of options and settings that you can use to customize the look and feel of your dialog boxes. Overall, this plugin is a useful tool for creating engaging and interactive dialog boxes for your web pages.

The plugin also includes various customization options, such as the ability to set the modal’s size and position, as well as customize its appearance with CSS

Warning

For Bootstrap v4 please use release 1.1.0

How To Use ?

Download the package and insert the core JavaScript bootstrap4dialog.js into your Bootstrap 4/5 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>

Add code for basic dialog with title and message.

Bootstrap4Dialog.show({
  title: 'Sample Title 1', 
  message: 'Message text goes here'
});

Create a toast-like notification box that automatically dismisses after 3 seconds.

Bootstrap4Dialog.show({
  message: 'Toast Message Here', 
  duration: 5
});

Create a modal window with custom buttons. Ideal for alert & confirmation dialog boxes.

Bootstrap4Dialog.show({
  title: 'Confirm Dialog',
  message: 'Are You Sure',
  buttons: [{
    id: 'btn-cancel',
    label: 'Cancel',
    cssClass: 'btn btn-light',
    action: function(dialog) {
      dialog.modal('hide');
    }
  },
  {
    id: 'btn-submit',
    label: ' Submit',
    cssClass: 'btn btn-sm btn-danger',
    action: function(dialog) {
      alert('fake form submittion..');
      dialog.modal('hide');
    }
  }]
})

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";
Bootstrap4Dialog.show({
  type: Bootstrap4Dialog.TYPE_LIGHT
})

Trigger custom functions when the modal is closed and hidden. Default: true.

Bootstrap4Dialog.show({
  open: function() {
    // do something
  },
  close: function() {
    // do something
  }
})

Close the modal manually.

instance.modal('hide');

Done

Thanks for make jQuery plugin is developed by SUXUMI For more Helpfull for users, please check the demo page or visit the official website.
List Of Version :
  • 2.0
  • 1.1.0
  • 1.0.0

Mady

Mady Schaferhoff is an expert jQuery script at jQuerypost. He offers web development services to clients globally. He also loves sharing Html,CSS, jQuery knowledge through blog posts like this one.