jQuery Dialog Field Plugin for Bootstrap – Bootbox

Bootbox is a tiny jQuery plugin for creating alert, affirm and versatile dialog packing containers utilizing Twitter’s Bootstrap framework.

At present works with the most recent Bootstrap 5, Bootstrap 4, and Bootstrap 3 frameworks.

The library exposes three strategies designed to imitate their native JavaScript equivalents. Their actual technique signatures are versatile as every can take numerous parameters to customize labels and specify defaults, however they’re mostly referred to as like so:

• bootbox.alert(message, callback)
• bootbox.immediate(message, callback)
• bootbox.affirm(message, callback)

See It In Motion:

See additionally:

You may additionally like:

How you can use it:

1. Embrace jQuery Library and the Bootbox.js plugin’s recordsdata.

<script src="/path/to/jquery.min.js"></script> 
<!-- Bootbox With out 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.  Embrace the most recent Bootstrap framework.

<hyperlink rel="stylesheet" href="/path/to/bootstrap.min.css">
<script src="/path/to/bootstrap.min.js"></script> 

3. Create an alert popup field.

bootbox.alert("Alert!", operate(){
  // non-compulsory callback
});
// or
bootbox.alert({
  dimension: "small",
  title: "Dialog Title",
  message: "Your message right here…",
  callback: operate(){}
})

4. Create a affirmation popup field.

bootbox.affirm("Are you certain?", operate(outcome){ 
  alert('confirmed') 
})
// or
bootbox.affirm({
  dimension: "small",
  message: "Are you certain?",
  callback: operate(outcome){ 
    alert('confirmed') 
  }
})

5. Create a immediate popup field.

bootbox.immediate("What's your title?", operate(outcome){ 
  // do one thing
})
// or
bootbox.immediate({
  worth: '', // preliminary worth
  inputType: 'enter', // any kind parts
  inputOptions: {},
  min: null, // min worth
  max: null, // max worth
  step: null, // step dimension
  maxlength: null, // max size
  sample: '', // require the enter worth to observe a particular format
  placeholder: '',
  required: true, // if is required
  a number of: false, // permits customers to pick out a couple of possibility when utilizing the choose enter kind
  dimension: "small",
  title: "What's your title?",
  callback: operate(outcome){ 
    // outcome = String containing consumer enter if OK clicked or null if Cancel clicked
  }
})

6. Create a customized popup field.

bootbox.dialog({
  message: 'HTML content material right here',
  // extra choices right here
})

7. World choices with default values.

bootbox.dialog({

  // dialog message
  message: 'HTML content material right here',

  // title
  title: 'dialog title',

  // exhibits the dialog instantly
  present: true,

  // default language
  locale: 'en',

  // dialog container
  container: 'physique',

  // default worth (utilized by the immediate helper)
  worth: '',

  // default enter kind (utilized by the immediate helper)
  inputType: 'textual content',

  // allows backdrop or not
  backdrop: null,

  // exhibits shut button
  closeButton: true,

  // allows animations or not
  animate: true,

  // further CSS class
  className: null,

  // dialog dimension
  dimension: 'small',

  // flips the order through which the buttons are rendered, from cancel/affirm to verify/cancel
  swapButtonOrder: false,

  // provides the the modal-dialog-centered to the doalog
  centerVertical: false,

  // Append "a number of" property to the choose when utilizing the "immediate" helper
  a number of: false,

  // Robotically scroll modal content material when peak exceeds viewport peak
  scrollable: false

  // dismisses the dialog by hitting ESC
  onEscape: true,

  // customized motion buttons
  buttons: {},

  // callback
  callback: operate(){},

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

8. The plugin additionally helps greater 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 language (Folks’s Republic of China)  
• zh-TW Chinese language (Taiwan / Republic of China)

bootbox.dialog({

  locale: 'en'

})

9. Decide if the popup field is reusable. Default: false.

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

10. API strategies.

// units choices
bootbox.setDefaults({
  // choices right here
});

// units native
bootbox.setLocale('en');

// provides native
bootbox.addLocale(String title, object values);

// removes native
bootbox.removeLocale(String title);

// hides all dialog packing containers
bootbox.hideAll();

Changelog:

v6.0.2 (2025-03-28)

• Updates immediate callback to return false from callback if inputType is ‘checkbox’, required possibility is true, and no checkbox has been checked
• Updates locals

2023-04-12

• Fixes linting errors and provides null test

v6.0.0 (2023-02-10)

v6.0.0 (2022-11-27)

• Provides Bootstrap 5 assist. Be aware: jQuery remains to be required
• Removes numerous IE polyfills
• Replaces var with let
• Normalizes locale strings to IANA customary format

v5.5.3 (2022-04-28)

• Provides relatedTarget possibility. Permits the caller to find out which factor, if any, triggered the modal
• Numerous bugfixes and package deal updates

v5.5.2 (2020-11-30)

v5.5.1 (2020-10-11)

• Provides reusable possibility, which permits an occasion of a Bootbox modal to be reused.

v5.4.1 (2020-09-29)

• Updates to backdrop possibility

v5.4.0 (2020-01-08)

• Provides hooks for Bootstrap’s modal occasions: onShow, onShown, onHide, and onHidden.

v5.3.2 (2019-11-04)

• Fixes incorrect worth validation for step attribute

v5.3.2 (2019-08-21)

v5.2.0 (2019-07-14)

• Modifies dialog to solely course of button callback if it has been outlined

v5.1.3 (2019-05-07)

v5.1.2 (2019-04-19)

• Provides bootbox.all.js to src listing as a short lived work-around for incorrectly-built concatenated file

v5.1.1 (2019-04-15)

• Provides rows as a immediate possibility when setting inputType to textarea.
• Provides scrollable choice to allow assist for Bootstrap’s new scrollable modal possibility
• Provides extra-large dimension possibility
• Provides aliases for every dimension possibility: sm, lg, and xl

v5.0.0 (2019-04-04)

v5.0.0 (2019-02-28)

2018-03-22

• Use .set off() as an alternative of jQuery occasion shorthand

v4.4.0 (2017-09-05)

• Enable backdrop choices of true and false to dismiss modals
• Move dialog as this worth in callbacks
• Bootstrap 3.3.2 compatibility
• jQuery 1.11.2 compatibility
• Add assist for maxlength immediate enter attribute
• Gracefully detect lack of Bootstrap library relatively than crashing
• Expose addLocale and removeLocale for customized locale settings
• Expose setLocale helper to pick out a locale relatively than utilizing 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)

• guarantee onEscape handlers return callback values correctly (GH-91)
• guarantee clicking shut button invokes onEscape handler if current

This superior jQuery plugin is developed by makeusabrew. For extra Superior Usages, please test the demo web page or go to the official web site.