Custom Dialog Boxes With Bootstrap 5 Modal Component – BS-DIALOGS

Preview:

Description:

This is a JavaScript library that utilizes the Bootstrap 5 modal component to create custom dialog boxes like alert notifications, confirm dialogs, and prompt popup boxes.

How to use it:

1. This library requires the latest 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 boxes.

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’ prompt 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’ prompt 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’ prompt popup box.

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

Changelog:

07/05/2021

• Bugfix