Create & Manage Bootstrap 5 Modals Using use-bootstrap-dialog JS Library

use-bootstrap-dialog is a robust JavaScript plugin that uses Bootstrap’s modal component to create customizable alert/confirm/prompt dialogs programmatically.

More Features:

• HTML Content Support
• Custom Footers and Action Buttons
• Show or hide the default close button
• Execute custom code when the dialog is closed
• And more

How to use it:

1. Install use-bootstrap-dialog using NPM:

# NPM
$ npm install use-bootstrap-dialog

2. Then import the necessary files into your project:

import 'use-bootstrap-dialog/dist/css/use-bootstrap-dialog.css'
import UseBootstrapDialog from 'use-bootstrap-dialog'

3. Alternatively, you can directly include the JavaScript and CSS files in your Bootstrap project:

<!-- Bootstrap is required -->
<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<script src="/path/to/cdn/bootstrap.bundle.min.js"></script>

<!-- use-bootstrap-dialog -->
<link href="/dist/css/use-bootstrap-dialog.min.css" rel="stylesheet">
<script src="/dist/js/use-bootstrap-dialog.min.js">

4. Create an alert dialog to display informative messages to the user.

UseBootstrapDialog.alert({
  // text: "Plain Text",
  html: "HTML Content",
  closeBtn: true,
  staticBackdrop: false,
  modalDialogClassName: "Additional CSS Class(es)"
})

5. Create a confirmation dialog with custom buttons and a callback function.

UseBootstrapDialog.confirm({
  // text: "Plain Text",
  html: 'Are you sure ?',
  closeBtn: true,
  title: {
    // text: "Plain Text",
    html: '<h5>Confirmation</h5>',
    closeBtn: true,
  },
  footer: {
    cancelBtn: {
      // text: "Plain Text",
      className: 'btn-secondary',
      html: 'Cancel',
      attributes: 'Additional attributes'
    },
    okBtn: {
      // text: "Plain Text",
      className: 'btn-primary',
      html: 'OK',
      attributes: 'Additional attributes'
    },
  },
  staticBackdrop: false,
  modalDialogClassName: "Additional CSS Class(es)",
  callback: (value: string) => any
})

6. Create a prompt dialog with an input field, custom buttons, and a callback function.

UseBootstrapDialog.prompt({
  // text: "Plain Text",
  html: 'HTML Content',
  closeBtn: true,
  title: {
    // text: "Plain Text",
    html: '<h5>Confirmation</h5>',
    closeBtn: true,
  },
  footer: {
    cancelBtn: {
      // text: "Plain Text",
      className: 'btn-secondary',
      html: 'Cancel',
      attributes: 'Additional attributes'
    },
    okBtn: {
      // text: "Plain Text",
      className: 'btn-primary',
      html: 'OK',
      attributes: 'Additional attributes'
    },
  },
  defaultValue: 'Default Value',
  required: true, // if the input is required
  staticBackdrop: false,
  modalDialogClassName: "Additional CSS Class(es)",
  callback: (value: string) => any
})

7. You can configure options globally by assigning an object to the variable “window.UseBootstrapDialogOptions”. For example:

window.UseBootstrapDialogOptions = {
  alert: {
    modalDialogClassName: 'modal-lg',
  },
  confirm: {
    title: {
      html: '<h5>Confirmación</h5>',
    },
    html: 'Está seguro ?',
    footer: {
      cancelBtn: {
        html: 'Cancelar',
      },
      okBtn: {
        className: 'btn-danger',
      },
    },
  },
  prompt: {
    closeBtn: false,
  },
}

The post Create & Manage Bootstrap 5 Modals Using use-bootstrap-dialog JS Library appeared first on CSS Script.