
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.
- Publication date: 11.02.2019
- Source