jQuery Dialog Boxes Plugin for Bootstrap - Bootbox

jQuery Dialog Boxes Plugin for Bootstrap - Bootbox

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

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)

You might also like:

Basic Usage:

1. Include jQuery Library and Bootbox.js

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
<script src="bootbox.min.js"></script> 

2.  Include Bootstrap files

<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
<script src="bootstrap.min.js"></script> 

3. Call the plugin

$(document).on("click", ".alert", function(e) {
  bootbox.alert("jQueryScript.Net!", function() {
    console.log("Alert Callback");

4. The Markup.

<a class="alert" href=#>Alert!</a>

5. Full plugin options.

  // default language
  locale: "en",
  // show backdrop or not. Default to static so user has to interact with dialog
  backdrop: "static",
  // animate the modal in/out
  animate: true,
  // additional class string applied to the top level dialog
  className: null,
  // whether or not to include a close button
  closeButton: true,
  // show the dialog immediately by default
  show: true,
  // dialog container
  container: "body"

Change Log:


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

  • Publication date: 22.03.2018
  • Source