Dialogs Based on Bootstrap 5 Modal Component

BS-DIALOGS is a small library for creating modal windows for notification and input using the Bootstrap 5 modal. It automatically handles DOM processing and provides callbacks to log user events.

bootstrap 5 modal example, bootstrap 4 modal popup, bootstrap modal form submit, bootstrap 3 3 7 modal, react bootstrap modal

Note: This library uses Bootstrap 5’s modal windows, which does not require jQuery, but must load Bootstrap’s js file before loading the bs dialog.

How to make use of it:

1. This library requires the most recent Bootstrap 5 framework.

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

2. Import the bsDialog as an ES module.

<script type="module">
  import * as bsDialog from "./src/bs-dialogs.js";
</script>

3. Create alert dialog packing containers.

bsDialog.infoDialog({
  message: "Info Message",
});

bsDialog.successDialog({
  message: "Success Message With Title",
  title: "SUCCESS"
});

bsDialog.errorDialog({
  message: "Error Message With Callback",
  title: "ERROR!"
}, function () {
  bsDialog.infoDialog({
  message: "Callback",
  });
});

4. Create an ‘INPUT’ prompt popup box.

bsDialog.textPrompt({
  message: "Prompt Message",
  title: "Prompt Title"
}, function (data) {
  // make sure to sanitize the input data
  let value = data.trim();
  // fired after confirmed
}, function () {
  // fired after cancelled
});

5. Create a ‘TEXTAREA’ immediate popup box.

bsDialog.textAreaPrompt({
  message: "Prompt Message",
  title: "Prompt Title"
}, function (data) {
  // make sure to sanitize the input data
  let value = data.trim();
  // fired after confirmed
}, function () {
  // fired after cancelled
});

6. Create a ‘NUMBER’ immediate popup box.

bsDialog.numberPrompt({
  message: "Prompt Message",
  title: "Prompt Title"
}, function (data) {
  let value = parseInt(data);
  // fired after confirmed
}, function () {
  // fired after cancelled
});

7. Create a ‘DATE’ immediate popup box.

bsDialog.datePrompt({
  message: "Prompt Message",
  title: "Prompt Title"
}, function (data) {
  // fired after confirmed
}, function () {
  // fired after cancelled
});

Custom Dialog Boxes With Bootstrap 5 Modal Component, BS-DIALOGS Plugin/Github