Create Flexible Dialog Boxes Using Bootstrap 4 - Bootprompt

Create Flexible Dialog Boxes Using Bootstrap 4 - Bootprompt
File Size: 168 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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.

How to use it:

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.