jQuery Dialog Box Plugin for Bootstrap - Bootbox

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 5, 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 It In Action:

See also:

• Mobile-friendly Bootstrap 4 Modals With jQuery - bootstrap-fs-modal
• Programmatic Bootstrap 4 Modal Generator - DynModal
• Extend Bootstrap 4 Modal With Extra Features - jQuery modal-js
• Bootstrap 4 Modal Wrapper Plugin With jQuery
• Create Dynamic Bootstrap 4 Modals In jQuery - bootstrap-show-modal.js
• Easy Bootstrap 4 Modal Creator With jQuery - modal_maker
• Dynamic Bootstrap 4 Modal Manager - jQuery bsModal

You might also like:

• Lightweight Modal Dialog Plugin - SimpleModal
• Modern Modal Dialogs - ModalBox
• Powerful jQuery Dialog Box Plugin - Zebra_Dialog
• Modal Dialog Windows Plugin - leanModal
• SimpleModal - Beautiful Popup Window Plugin

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:

• Fixes linting errors and adds null check

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