jQuery Plugins › jQuery LightBox Plugins › jQuery Bootbox

jQuery Dialog Box Plugin for Bootstrap - Bootbox

File Size:	238 KB
Views Total:	39212
Last Update:	05/25/2025 05:11:00 UTC
Publish Date:	01/24/2013 02:38:54 UTC
Official Website:	Go to website
License:	MIT

Demo Download

See It In Action:

How to use it:

1. Include jQuery Library and the Bootbox.js plugin's files.

<script src="/path/to/jquery.min.js"></script> 
<!-- Bootbox Without Locals -->
<script src="dist/bootbox.min.js"></script>
<!-- Locals -->
<script src="dist/bootbox.locales.min.js"></script>
<!-- Bootbox With Locals -->
<script src="dist/bootbox.all.min.js"></script>

2. Include the latest Bootstrap framework.

<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!", function(){
  // optional callback
});
// 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',
  // more options 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(){},

  // the element that triggered the dialog opening
  relatedTarget: null,
  
})

8. The plugin also supports more than 42 locals.

ar Arabic
az Azerbaijani
bg-BG Bulgarian
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
ka Georgian
ko Korean
lt Lithuanian
lv Latvian
nl Dutch
no Norwegian
pl Polish
pt Portuguese
pt-BR Portuguese (Brasil)
ru Russian
sk Slovak
sl Slovenian
sq Albanian
sv Swedish
sw Swahili
ta Tamil
th Thai
tr Turkish
uk Ukrainian
vi Vietnamese
zh-CN Chinese (People's Republic of China)
zh-TW Chinese (Taiwan / Republic of China)

bootbox.dialog({

  locale: 'en'

})

9. Determine if the popup box is reusable. Default: false.

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

10. 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:

v6.0.4 (2025-05-25)

Updates step to allow setting value for date inputs

v6.0.3 (2025-04-14)

Allows min and max values to be equal when using inputType: 'number' for prompt() helper.

v6.0.2 (2025-03-28)

Updates prompt callback to return false from callback if inputType is 'checkbox', required option is true, and no checkbox has been checked
Updates locals

2023-04-12

Fixes linting errors and adds null check

v6.0.0 (2023-02-10)

Update configs

v6.0.0 (2022-11-27)

Adds Bootstrap 5 support. Note: jQuery is still required
Removes various IE polyfills
Replaces var with let
Normalizes locale strings to IANA standard format

v5.5.3 (2022-04-28)

Adds relatedTarget option. Allows the caller to determine which element, if any, triggered the modal
Various bugfixes and package updates

v5.5.2 (2020-11-30)

Adds Vietnamese locale

v5.5.1 (2020-10-11)

Adds reusable option, which allows an instance of a Bootbox modal to be reused.

v5.4.1 (2020-09-29)

Updates to backdrop option

v5.4.0 (2020-01-08)

Adds hooks for Bootstrap's modal events: onShow, onShown, onHide, and onHidden.

v5.3.2 (2019-11-04)

Fixes incorrect value validation for step attribute

v5.3.2 (2019-08-21)

Adds Georgian locale

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 bootboxjs. For more Advanced Usages, please check the demo page or visit the official website.

jQuery Dialog Box Plugin for Bootstrap - Bootbox

See It In Action:

See also:

You might also like:

How to use it:

Changelog:

jQuery Dialog Box Plugin for Bootstrap - Bootbox

See It In Action:

See also:

You might also like:

How to use it:

Changelog:

Related jQuery Plugins

You Might Also Like

Add Your Review