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

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

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>

2. Load the jQuery Bootprompt plugin 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(){}
  
})

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();

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