jQuery Dialog Boxes Plugin for Bootstrap - Bootbox

jQuery Dialog Boxes Plugin for Bootstrap - Bootbox
File Size: 217 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Bootbox is a tiny jQuery plugin for creating alert, confirm and flexible dialog boxes using Twitter's Bootstrap framework.

Currently works with the latest Bootstrap 4 and Bootstrap 3 frameworks.

The library exposes three methods designed to mimic their native JavaScript equivalents. Their exact method signatures are flexible as each can take various parameters to customise labels and specify defaults, but they are most commonly called like so:

  • bootbox.alert(message, callback)
  • bootbox.prompt(message, callback)
  • bootbox.confirm(message, callback)

See also:

You might also like:

Basic Usage:

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 files.

<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 a prompt 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 custom 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. The plugin also supports more than 38 locals.

  • ar  Arabic  
  • az  Azerbaijani
  • bg_BG Bulgarian 
  • br  Portuguese - Brazil
  • cs  Czech 
  • da  Danish
  • de  German  
  • el  Greek
  • en  English 
  • es  Spanish / Español
  • et  Estonian  
  • eu  Basque
  • fa  Farsi / Persian 
  • fi  Finnish
  • fr  French / Français 
  • he  Hebrew
  • hr  Croatian  
  • hu  Hungarian
  • id  Indonesian  
  • it  Italian
  • ja  Japanese  
  • ko  Korean
  • lt  Lithuanian  
  • lv  Latvian
  • nl  Dutch 
  • no  Norwegian
  • pl  Polish  
  • pt  Portuguese
  • ru  Russian 
  • sk  Slovak
  • sl  Slovenian 
  • sq  Albanian
  • sv  Swedish 
  • sw Swahili
  • ta Tamil
  • th  Thai
  • tr  Turkish 
  • uk  Ukrainian
  • zh_CN Chinese (People's Republic of China)  
  • zh_TW Chinese (Taiwan / Republic of China)
bootbox.dialog({

  locale: 'en'

})

9. API methods.

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

Changelog:

v5.2.0 (2019-07-14)

  • Modifies dialog to only process button callback if it has been defined

v5.1.3 (2019-05-07)

  • Adds Swahili locale.

v5.1.2 (2019-04-19)

  • Adds bootbox.all.js to src directory as a temporary work-around for incorrectly-built concatenated file

v5.1.1 (2019-04-15)

  • Adds rows as a prompt option when setting inputType to textarea.
  • Adds scrollable option to enable support for Bootstrap's new scrollable modal option
  • Adds extra-large size option
  • Adds aliases for each size option: sm, lg, and xl

v5.0.0 (2019-04-04)

  • Adds Tamil locale

v5.0.0 (2019-02-28)

  • Updated For Bootstrap 4.

2018-03-22

  • Use .trigger() instead of jQuery event shorthand

v4.4.0 (2017-09-05)

  • Allow backdrop options of true and false to dismiss modals
  • Pass dialog as this value in callbacks
  • Bootstrap 3.3.2 compatibility
  • jQuery 1.11.2 compatibility
  • Add support for maxlength prompt input attribute
  • Gracefully detect lack of Bootstrap library rather than crashing
  • Expose addLocale and removeLocale for custom locale settings
  • Expose setLocale helper to select a locale rather than using setDefaults("locale", ...)
  • Add Hungarian locale
  • Add Croatian locale
  • Add Bulgarian locale
  • Add Thai locale
  • Add Persian locale
  • Add Albanian locale

v3.2.0 (2013-04-09)

  • ensure onEscape handlers return callback values properly (GH-91)
  • ensure clicking close button invokes onEscape handler if present

This awesome jQuery plugin is developed by makeusabrew. For more Advanced Usages, please check the demo page or visit the official website.