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.

Build your own Dialogs!

Each Bootbox function calls a fourth public function, dialog(), which you can use to create your own custom dialogs. Refer to the documentation page for use and for options available for each function.

Must Read: Implementing Pop-up Dialogs, Messages with CSS3 | jquery-popup

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 options 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();

Available Locales/Languages

The languages are used to provide a translation for each of the built-in command buttons (OK, CANCEL, and CONFIRM).

KeyName
arArabic
azAzerbaijani
bg-BGBulgarian
csCzech
daDanish
deGerman
elGreek
enEnglish
esSpanish / Español
etEstonian
euBasque
faFarsi / Persian
fiFinnish
frFrench / Français
heHebrew
hrCroatian
huHungarian
idIndonesian
itItalian
jaJapanese
kaGeorgian
koKorean
ltLithuanian
lvLatvian
nlDutch
noNorwegian
plPolish
ptPortuguese
pt-BRPortuguese – Brasil
ruRussian
skSlovak
slSlovenian
sqAlbanian
svSwedish
swSwahili
taTamil
thThai
trTurkish
ukUkrainian
zh-CNChinese (People’s Republic of China)
zh-TWChinese (Taiwan / Republic of China)

See Demo And Download

Bootstrap-Alert-Bootbox

Official Website(makeusabrew): Click Here

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

Related Posts

drag-drop-file-5x5-jq-uploader

Responsive Drag and Drop File Uploader/Download Plugin | 5x5_jq_uploader

5x5_jq_uploader plugin can be used to instantly create a drop file area and file queue with a little bit of preparation. Bootstrap is used for responsive planning…

Bootstrap-Dark-Mode

Stylesheet For Implementing Dark Mode with Bootstrap

Bootstrap Dark Mode provides a style sheet and two texts that allow you to implement Dark Mode on your website. Initially loaded based on user preferences, can…

responsive-navigation-menu

Multi-purpose Navigation Menu for Javascript Library | jQuery Corenav

coreNavigation is a multipurpose navigation menu for a jquery based javascript library, comes with more style, and is easy to integrate. 11 Default Menu 2 Responsive Navigation…

Simple-Multi-Select-Dropdown-Pure-Vanilla-Javascript

Simple Multi-Select Dropdown Pure Vanilla Javascript | multiSelect.js

MultiSelect.js is a simple, clean, and progressive JavaScript library designed for easy integration with any type of project or system. The design was heavily influenced by the…

Confetti-Falling-Animation-Effect-party

Confetti Falling Animation Effect In JavaScript | party.js

Party.js is a JavaScript library to brighten user site experience with visual effects! Celebrate success with dom confetti! The library is written in TypeScript and compiled into…

how-to-create-popup-in-html-with-css

How To Create A Popup in HTML with CSS

How to create popup in html with css – Popup without JavaScript is an elegant pop-up panel component with an animated scale, written in CSS. Have you…