Examples

Currently viewing examples for version 1.x.

Compatible with Bootstrap 3 and 4

The examples below attempt to demonstrate the myriad ways in which you can use Bootprompt.js. Where functionality amongst the dialogs is nearly identical, the example will indicate to which functions the example applies.

Alert

  • Basic usage

    1. bootprompt.alert("This is the default alert!");
  • Basic usage, with callback

    1. bootprompt.alert("This is an alert with a callback!", function(){ console.log('This was logged in the callback!'); });
  • Basic usage, using options object

    1. bootprompt.alert({
    2.     message: "This is an alert with a callback!",
    3.     callback: function () {
    4.         console.log('This was logged in the callback!');
    5.     }
    6. })
  • Small dialog

    Also applies to: Confirm, Prompt, Custom 

    1. bootprompt.alert({
    2.     message: "This is the small alert!",
    3.     size: 'small'
    4. });

    Requires Bootstrap 3.1.0 or newer.

  • Large dialog

    Also applies to: Confirm, Prompt, Custom 

    1. bootprompt.alert({
    2.     message: "This is the large alert!",
    3.     size: 'large'
    4. });

    Requires Bootstrap 3.1.0 or newer.

  • Custom CSS class (using Animate.css)

    Also applies to: Confirm, Prompt, Custom 

    1. bootprompt.alert({
    2.     message: "This is an alert with additional classes!",
    3.     className: 'rubberBand animated'
    4. });
  • Dismiss with overlay click

    Also applies to: Confirm, Prompt, Custom 

    1. bootprompt.alert({
    2.     message: "This alert can be dismissed by clicking on the background!",
    3.     backdrop: true
    4. });
  • Using a locale

    Also applies to: Confirm, Prompt, Custom 

    1. bootprompt.alert({
    2.     message: "This alert uses the Arabic locale!",
    3.     locale: 'ar'
    4. });

Confirm

  • Basic usage

    1. bootprompt.confirm("This is the default confirm!", function(result){ console.log('This was logged in the callback: ' + result); });
  • With alternate button text and color

    Also applies to: Alert, Prompt, Custom 

    1. bootprompt.confirm({
    2.     message: "This is a confirm with custom button text and color! Do you like it?",
    3.     buttons: {
    4.         confirm: {
    5.             label: 'Yes',
    6.             className: 'btn-success'
    7.         },
    8.         cancel: {
    9.             label: 'No',
    10.             className: 'btn-danger'
    11.         }
    12.     },
    13.     callback: function (result) {
    14.         console.log('This was logged in the callback: ' + result);
    15.     }
    16. });
  • With icon and button text

    Also applies to: Alert, Prompt, Custom 

    1. bootprompt.confirm({
    2.     title: "Destroy planet?",
    3.     message: "Do you want to activate the Deathstar now? This cannot be undone.",
    4.     buttons: {
    5.         cancel: {
    6.             label: '<i class="fa fa-times"></i> Cancel'
    7.         },
    8.         confirm: {
    9.             label: '<i class="fa fa-check"></i> Confirm'
    10.         }
    11.     },
    12.     callback: function (result) {
    13.         console.log('This was logged in the callback: ' + result);
    14.     }
    15. });
  • Demoing all locales

    Also applies to: Alert, Prompt, Custom 

    1. var locale = $('#locales').val();
    2. bootprompt.confirm({
    3.     message: "This confirm uses the selected locale. Were the labels what you expected?",
    4.     locale: locale,
    5.     callback: function (result) {
    6.         Example.show('This was logged in the callback: ' + result);
    7.     }
    8. });

Prompt

Please note: prompt requires the title option (when using the options object). You may use the message option, but the prompt result will not include any form inputs from your message.

  • Basic usage

    1. bootprompt.prompt("This is the default prompt!", function(result){ console.log(result); });

    If you want to style the input, you can target the .bootprompt-input-text class.

  • With a custom locale

    1. var locale = {
    2.     OK: 'I Suppose',
    3.     CONFIRM: 'Go Ahead',
    4.     CANCEL: 'Maybe Not'
    5. };
    6. bootprompt.addLocale('custom', locale);
    7. bootprompt.prompt({
    8.     title: "This is a prompt with a custom locale! What do you think?",
    9.     locale: 'custom',
    10.     callback: function (result) {
    11.         Example.show('This was logged in the callback: ' + result);
    12.     }
    13. });
  • Prompt with checkbox

    1. bootprompt.prompt({
    2.     title: "This is a prompt with a set of checkbox inputs!",
    3.     value: ['1', '3'],
    4.     inputType: 'checkbox',
    5.     inputOptions: [{
    6.         text: 'Choice One',
    7.         value: '1',
    8.     },
    9.     {
    10.         text: 'Choice Two',
    11.         value: '2',
    12.     },
    13.     {
    14.         text: 'Choice Three',
    15.         value: '3',
    16.     }],
    17.     callback: function (result) {
    18.         console.log(result);
    19.     }
    20. });

    Checkboxes are nested in an element with the class .bootprompt-checkbox-list. If you want to style the individual checkbox inputs, you can target the .bootprompt-input-checkbox class.

  • Prompt with radio buttons and a message value

    1. bootprompt.prompt({
    2.     title: "This is a prompt with a set of radio inputs!",
    3.     message: '<p>Please select an option below:</p>',
    4.     inputType: 'radio',
    5.     inputOptions: [
    6.     {
    7.         text: 'Choice One',
    8.         value: '1',
    9.     },
    10.     {
    11.         text: 'Choice Two',
    12.         value: '2',
    13.     },
    14.     {
    15.         text: 'Choice Three',
    16.         value: '3',
    17.     }
    18.     ],
    19.     callback: function (result) {
    20.         console.log(result);
    21.     }
    22. });

    Radio buttons are nested in an element with the class .bootprompt-radiobutton-list. If you want to style the individual radio inputs, you can target the .bootprompt-input-radio class.

    When using the radio option, the first radio button will be checked if value is missing or does not match an inputOptions value.

  • Prompt with date

    Requires browser support: http://caniuse.com/#feat=input-datetime 

    1. bootprompt.prompt({
    2.     title: "This is a prompt with a date input!",
    3.     inputType: 'date',
    4.     callback: function (result) {
    5.         console.log(result);
    6.     }
    7. });

    If you want to style the input, you can target the .bootprompt-input-date class.

  • Prompt with email

    Requires browser support: http://caniuse.com/#feat=email 

    1. bootprompt.prompt({
    2.     title: "This is a prompt with an email input!",
    3.     inputType: 'email',
    4.     callback: function (result) {
    5.         console.log(result);
    6.     }
    7. });

    If you want to style the input, you can target the .bootprompt-input-email class.

  • Prompt with number

    Requires browser support: http://caniuse.com/#feat=input-number 

    1. bootprompt.prompt({
    2.     title: "This is a prompt with a number input!",
    3.     inputType: 'number',
    4.     callback: function (result) {
    5.         console.log(result);
    6.     }
    7. });

    If you want to style the input, you can target the .bootprompt-input-number class.

  • Prompt with password

    1. bootprompt.prompt({
    2.     title: "This is a prompt with a password input!",
    3.     inputType: 'password',
    4.     callback: function (result) {
    5.         console.log(result);
    6.     }
    7. });

    If you want to style the input, you can target the .bootprompt-input-password class.

  • Prompt with select

    1. bootprompt.prompt({
    2.     title: "This is a prompt with select!",
    3.     inputType: 'select',
    4.     inputOptions: [
    5.     {
    6.         text: 'Choose one...',
    7.         value: '',
    8.     },
    9.     {
    10.         text: 'Choice One',
    11.         value: '1',
    12.     },
    13.     {
    14.         text: 'Choice Two',
    15.         value: '2',
    16.     },
    17.     {
    18.         text: 'Choice Three',
    19.         value: '3',
    20.     }
    21.     ],
    22.     callback: function (result) {
    23.         console.log(result);
    24.     }
    25. });

    If you want to style the select, you can target the .bootprompt-input-select class.

  • Prompt with textarea

    1. bootprompt.prompt({
    2.     title: "This is a prompt with a textarea!",
    3.     inputType: 'textarea',
    4.     callback: function (result) {
    5.         console.log(result);
    6.     }
    7. });

    If you want to style the textarea, you can target the .bootprompt-input-textarea class.

  • Prompt with time

    Requires browser support: http://caniuse.com/#feat=input-datetime 

    1. bootprompt.prompt({
    2.     title: "This is a prompt with a time input!",
    3.     inputType: 'time',
    4.     callback: function (result) {
    5.         console.log(result);
    6.     }
    7. });

    If you want to style the input, you can target the .bootprompt-input-time class.

  • Prompt with range

    Requires browser support: http://caniuse.com/#feat=input-range 

    1. bootprompt.prompt({
    2.     title: "This is a prompt with a range input!",
    3.     inputType: 'range',
    4.     min: 0,
    5.     max: 100,
    6.     step: 5,
    7.     value: 35,
    8.     callback: function (result) {
    9.         Example.show('This was logged in the callback: ' + result);
    10.     }
    11. });

    If you want to style the input, you can target the .bootprompt-input-range class.

Custom Dialogs

Please note: Custom dialogs accept only one argument: an options object. The only required property of the options object is message.

  • Custom dialog as "loading" overlay

    1. var dialog = bootprompt.dialog({
    2.     message: '<p class="text-center mb-0"><i class="fa fa-spin fa-cog"></i> Please wait while we do something...</p>',
    3.     closeButton: false
    4. });
    5. // do something in the background
    6. dialog.modal('hide');
  • Custom dialog, using init

    Also applies to: Alert, Confirm, Prompt 

    1. var dialog = bootprompt.dialog({
    2.     title: 'A custom dialog with init',
    3.     message: '<p><i class="fa fa-spin fa-spinner"></i> Loading...</p>'
    4. });
    5. dialog.init(function(){
    6.     setTimeout(function(){
    7.         dialog.find('.bootprompt-body').html('I was loaded after the dialog was shown!');
    8.     }, 3000);
    9. });
  • Custom dialog, with buttons and callbacks 

    1. var dialog = bootprompt.dialog({
    2.     title: 'A custom dialog with buttons and callbacks',
    3.     message: "<p>This dialog has buttons. Each button has it's own callback function.</p>",
    4.     size: 'large',
    5.     buttons: {
    6.         cancel: {
    7.             label: "I'm a cancel button!",
    8.             className: 'btn-danger',
    9.             callback: function(){
    10.                 Example.show('Custom cancel clicked');
    11.             }
    12.         },
    13.         noclose: {
    14.             label: "I don't close the modal!",
    15.             className: 'btn-warning',
    16.             callback: function(){
    17.                 Example.show('Custom button clicked');
    18.                 return false;
    19.             }
    20.         },
    21.         ok: {
    22.             label: "I'm an OK button!",
    23.             className: 'btn-info',
    24.             callback: function(){
    25.                 Example.show('Custom OK clicked');
    26.             }
    27.         }
    28.     }
    29. });