Advanced Dialog & Modal Plugin For Bootstrap 5 – bs5dialog

Image may be NSFW.
Clik here to view.

bs5dialog is a JavaScript plugin to create alert/confirm/prompt popups, loading indicators, toast notifications, and dialog windows using Bootstrap 5 styles.

How to use it:

1. Load the bs5dialog’s JavaScript and CSS in your Bootstrap 5 project.

<!-- Required -->
<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />

<!-- bs5dialog -->
<link rel="stylesheet" href="./bs5dialog.css" />
<script src="./bs5dialog.js"></script>

2. Create alert dialogs.

bs5dialog.alert('This is an alert message.', {
  title: "",
  type: "success",
  size: "md",
  id: "",
  btnOkText: "",
  icon: null,
  iconClass: "",
  iconStyle: "",
  onOk: null,
  timeout: 0
});

3. Create confirmation dialogs.

bs5dialog.confirm('This is a confirm message.', {
  title: 'Confirm Dialog Title',
  type: "danger",
  id: "",
  size: "md",
  btnOkText: "",
  btnCancelText: "",
  icon: null,
  iconClass: "",
  iconStyle: "",
  onConfirm: null,
  onCancel: null
});

4. Create prompt dialogs.

bs5dialog.prompt('Enter your name:', {
  title: "",
  type: "secondary",
  size: "md",
  btnText: "",
  icon: null,
  iconClass: "",
  iconStyle: "",
  required: true,
  secret: false,
  onConfirm: (value) => {
    console.log(`Hello, ${value}!`);
  },
  onCancel: () => {
    console.log('Prompt dialog box was cancelled.');
  }
});

5. Attach a loading spinner to an element.

const targetElement = document.querySelector("#targetElement");
const options = {
      animation: "border",
      animationClass: "text-warning",
      animationStyle: "",
      text: "Please wait...",
      type: "",
      backdrop: true,
      timeout: 2000
};
bs5dialog.spinner(targetElement, options);
// hide the spinner:
hide();

6. Create toast messages.

bs5dialog.toast("Hello world!", {
  title: "",
  subtitle: "",
  position: "bottom-right",
  type: "success",
  closeBtn: false,
  icon: "bs5-point",
  iconClass: "",
  iconStyle: "",
  timeout: 3000,
  onShow: function () {},
  onShown: function () {},
  onHide: function () {},
  onHidden: function () {}
});

// OR
const options = {
      position: "center",
      type: "",
      closeBtn: false,
      background: "",
      textColor: "white",
      fontsize: "",
      icon: "",
      iconClass: "",
      iconStyle: "",
      timeout: 3000,
      onClose: function () {},
      onClosed: function () {}
};
const msg = bs5dialog.message("This is a success message", options);

7. Create offcanvas panels.

const content = 'This is the content of the offcanvas.';
const options = {
      title: "",
      direction: "start",
      size: "",
      id: "",
      backdrop: true,
      scroll: true,
      dark: false,
      accordion: true,
      container: "",
      onStart: function () {},
      onShown: function () {},
      onHidden: function () {}
};
const offcanvasInstance = bs5dialog.offcanvas(content, options);

8. Load any content into the dialog window.

bs5dialog.load('/path/to/page/', {
  title: "",
  type: "danger",
  size: "lg",
  id: "",
  centered: true,
  scrollable: true,
  maximize: false,
  backdrop: false,
  focus: true,
  keyboard: true,
  draggable: true,
  resizable: true,
  btnOkText: "",
  btnCancelText: "",
  onShow: null,
  onShown: null,
  onHide: null,
  onHidden: null,
  isForm: true,
  onSubmit: null,
  onSubmitSuccess: submitResult => {},
  onSubmitError: submitResult => {},
  onSubmitDone: submitResult => {}
});

9. Toggle the dialog & modal via data-bs5-dialog attribute.

bs5dialog.startup();

<button data-bs5-dialog="alert" title="show alert">data-bs5-dialog="alert"</button>
<button data-bs5-dialog="confirm" title="show confirm">data-bs5-dialog="confirm"</button>
<button data-bs5-dialog="prompt" title="show prompt">data-bs5-dialog="prompt"</button>
<button data-bs5-dialog="message" title="show message">data-bs5-dialog="message"</button>
<button data-bs5-dialog="toast" title="show toast">data-bs5-dialog="toast"</button>
<button data-bs5-dialog="load" data-content="show load content">data-bs5-dialog="load"</button>
<button data-bs5-dialog="offcanvas" data-bs5-dialog-option-title="offcanvas" data-content="show load offcanvas">data-bs5-dialog="offcanvas"</button>

Changelog:

v1.0.12 (04/07/2025)

• fix On bootstrap 5.3 the dropdown does not work

The post Advanced Dialog & Modal Plugin For Bootstrap 5 – bs5dialog appeared first on CSS Script.