Create Flexible Dialog Boxes Using Bootstrap 4 - Bootprompt

Bootprompt is the upgraded version of Bootbox plugin that lets you create flexible, multi-language alert, confirmation, prompt and custom popup boxes using the latest Bootstrap 4 or Bootstrap 3 framework.

How to use it:

1. Load the needed jQuery JavaScript library and Bootstrap framework in the document.

<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/cdn/bootstrap.min.js"></script>

2. Load the jQuery Bootprompt plugin from a CDN.

<!-- Core -->
<script src="/path/to/dist/bootprompt.min.js"></script>
<!-- Locals-->
<script src="/path/to/dist/bootprompt.locales.min.js"></script>
<!-- Or From A CDN -->
<script src="https://unpkg.com/bootprompt"></script>

3. Create an alert popup box.

bootprompt.alert("Alert!");
// or
bootprompt.alert({
  size: "small",
  title: "Dialog Title",
  message: "Your message here…",
  callback: function(){}
})

4. Create a confirmation popup box.

bootprompt.confirm("Are you sure?", function(result){ 
  alert('confirmed') 
})
// or
bootprompt.confirm({
  size: "small",
  message: "Are you sure?",
  callback: function(result){ 
    alert('confirmed') 
  }
})

5. Create a prompt popup box.

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

bootprompt.dialog({
  message: 'HTML content here'
})

7. Global options with default values.

bootprompt.dialog({

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

  // title
  title: 'dialog title',

  // shows the dialog immediately
  show: true,

  // 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,

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

  // custom action buttons
  buttons: {},

  // callback
  callback: function(){},

  // allows the user to dismiss the dialog by pressing ESC
  onEscape: true
  
})

8. The plugin also supports more than 38 locals.

• ar  Arabic  
• az  Azerbaijani
• bg_BG Bulgarian 
• br  Portuguese - Brazil
• 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  
• ko  Korean
• lt  Lithuanian  
• lv  Latvian
• nl  Dutch 
• no  Norwegian
• pl  Polish  
• pt  Portuguese
• ru  Russian 
• sk  Slovak
• sl  Slovenian 
• sq  Albanian
• sv  Swedish 
• th  Thai
• tr  Turkish 
• uk  Ukrainian
• zh_CN Chinese (People's Republic of China)  
• zh_TW Chinese (Taiwan / Republic of China)

bootprompt.dialog({

  locale: 'en'

})

9. API methods.

// sets options
bootprompt.setDefaults({
  // options here
});

// sets local
bootprompt.setLocale('en');

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

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

// hides all dialog boxes
bootprompt.hideAll();

Changelog:

2020-08-27

• Added build folder

v6.0.2 (2019-05-29)

• improve type inference for the prompt$ function
• removed unused interface Locale

v6.0.0 (2019-04-10)

• 'onClose' was added. From now on 'onEscape' only deals with the Escape key and 'onClose' only deals with the close button in the header.
• For the specialized functions ('alert', 'confirm', 'prompt'), 'onClose' and 'onEscape' affect whether 'callback' is called or not. They do not by themselves determine whether the modal is closed or not. It is always 'callback' that determines whether the modal is closed or not.
• For 'dialog', 'onEscape' and 'onClose' determine whether the modal is closed. ('callback' is ignored so there's nothing else that can determine
•    it.)
• 'setDefaults' is gone
• 'callback' is no longer allowed on 'DialogOptions'
• The specialized functions are 'alert', 'confirm', 'prompt'.
• The addition of the promise-based API requires that 'Promise' be present. On
• IE10/11 you'll need a polyfill.

2019-03-22

• fix: fix onEscape and separate onEscape into onEscape and onClose

2019-03-01

• v5.0.0

2019-02-21

• add support for multiple

---

This awesome jQuery plugin is developed by lddubeau. For more Advanced Usages, please check the demo page or visit the official website.