Bootstrap Modal With Plugin Bootbox

Bootbox is a small bootstrap modal jquery plugin to create a warning, confirmation, and flexible dialog box using a Twitter bootstrap framework.

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

Bootstrap Modal
Bootstrap Modal

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)

How to use it:

1. Include jQuery Library and the Bootbox.js plugin 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
  size: "small",
  title: "Dialog Title",
  message: "Your message here…",
  callback: function(){}

4. Create a confirmation popup box.

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

5. Create a prompt popup box.

bootbox.prompt("What is your name?", function(result){ 
  // do something
// or
  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.

  message: 'HTML content here',
  // more options here

7. Global options with default values.


  // 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)
  locale: 'en'

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

  // whether or not to destroy the modal on hide
  reusable: false

10. API methods.

// sets options
  // options here

// sets local

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

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

// hides all dialog boxes

Live Demo

See the Pen Bootstrap Modal With Plugin Bootbox by Plugin JS (@pluginjs) on CodePen.

File Info

File Name :
Size :
Site Download :
Official Website:
Go to website
Previous Post Next Post