Bootstrap Alert, Confirm, and Flexible Dialog Boxes | Bootbox

Bootbox.js is a small JavaScript library that allows you to create programming dialogs using Bootstrap templates, without having to worry about creating, managing, or removing any required DOM elements or JS event handlers.

bootstrap 4 modal popup, bootstrap modal popup, jquery modal popup, bootstrap modal example, bootstrap confirm box, bootstrap 4 confirm dialog box

How to make use of it:

1. Include jQuery Library and Bootbox.js.

<script src="/path/to/jquery.min.js"></script> 
<script src="/path/to/bootbox.min.js"></script> 

2.  Include Bootstrap information.

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

3. Create an alert popup box.

bootbox.alert("Alert!");
// or
bootbox.alert({
  size: "small",
  title: "Dialog Title",
  message: "Your message here…",
  callback: function(){}
})

4. Create a confirmation popup box.

bootbox.confirm("Are you sure?", function(result){ 
  alert('confirmed') 
})
// or
bootbox.confirm({
  size: "small",
  message: "Are you sure?",
  callback: function(result){ 
    alert('confirmed') 
  }
})

5. Create an immediate popup box.

bootbox.prompt("What is your name?", function(result){ 
  // do something
})
// or
bootbox.prompt({
  value: '', // initial value
  inputType: 'input', // any form elements
  inputOptions: {},
  min: null, // min value
  max: null, // max value
  step: null, // step size
  maxlength: null, // max length
  pattern: '', // require the input value to follow a specific format
  placeholder: '',
  required: true, // if is required
  multiple: false, // allows users to select more than one option when using the select input type
  size: "small",
  title: "What is your name?",
  callback: function(result){ 
    // result = String containing user input if OK clicked or null if Cancel clicked
  }
})

6. Create a customized popup box.

bootbox.dialog({
  message: 'HTML content here'
})

7. Global choices with default values.

bootbox.dialog({

  // dialog message
  message: 'HTML content here',

  // title
  title: 'dialog title',

  // shows the dialog immediately
  show: true,

  // default language
  locale: 'en',

  // dialog container
  container: 'body',

  // default value (used by the prompt helper)
  value: '',

  // default input type (used by the prompt helper)
  inputType: 'text',

  // enables backdrop or not
  backdrop: null,

  // shows close button
  closeButton: true,

  // enables animations or not
  animate: true,

  // extra CSS class
  className: null,

  // dialog size
  size: 'small',

  // flips the order in which the buttons are rendered, from cancel/confirm to confirm/cancel
  swapButtonOrder: false,

  // adds the the modal-dialog-centered to the doalog
  centerVertical: false,

  // Append "multiple" property to the select when using the "prompt" helper
  multiple: false,

  // Automatically scroll modal content when height exceeds viewport height
  scrollable: false

  // dismisses the dialog by hitting ESC
  onEscape: true,

  // custom action buttons
  buttons: {},

  // callback
  callback: function(){}
  
})

8. Determine if the popup box is reusable.

bootbox.dialog({
  // whether or not to destroy the modal on hide
  reusable: false
})

9. API strategies.

// sets options
bootbox.setDefaults({
  // options here
});

// sets local
bootbox.setLocale('en');

// adds local
bootbox.addLocale(String name, object values);

// removes local
bootbox.removeLocale(String name);

// hides all dialog boxes
bootbox.hideAll();

jQuery Dialog Boxes Plugin for Bootstrap, Bootbox dialog boxes Plugin/Github


See Demo And Download

Official Website(makeusabrew): Click Here

This superior jQuery/javascript plugin is developed by makeusabrew. For extra Advanced Usage, please go to the official website.

Share