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
Table of Contents
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.
