Bootstrap编程式对话框插件bootprompt.js Bootstrap powered alert, confirm and flexible dialog boxes

jQuery之家 返回下载页

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

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

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

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

    Also applies to: Confirm, Prompt, Custom 

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

    Requires Bootstrap 3.1.0 or newer.

  • Large dialog

    Also applies to: Confirm, Prompt, Custom 

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

    Requires Bootstrap 3.1.0 or newer.

  • Custom CSS class (using Animate.css)

    Also applies to: Confirm, Prompt, Custom 

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

    Also applies to: Confirm, Prompt, Custom 

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

    Also applies to: Confirm, Prompt, Custom 

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

Confirm

  • Basic usage

    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 

    bootprompt.confirm({
    message: "This is a confirm with custom button text and color! Do you like it?",
    buttons: {
        confirm: {
            label: 'Yes',
            className: 'btn-success'
        },
        cancel: {
            label: 'No',
            className: 'btn-danger'
        }
    },
    callback: function (result) {
        console.log('This was logged in the callback: ' + result);
    }
});
  • With icon and button text

    Also applies to: Alert, Prompt, Custom 

    bootprompt.confirm({
    title: "Destroy planet?",
    message: "Do you want to activate the Deathstar now? This cannot be undone.",
    buttons: {
        cancel: {
            label: '<i class="fa fa-times"></i> Cancel'
        },
        confirm: {
            label: '<i class="fa fa-check"></i> Confirm'
        }
    },
    callback: function (result) {
        console.log('This was logged in the callback: ' + result);
    }
});
  • Demoing all locales

    Also applies to: Alert, Prompt, Custom 

    var locale = $('#locales').val();

bootprompt.confirm({
    message: "This confirm uses the selected locale. Were the labels what you expected?",
    locale: locale,
    callback: function (result) {
        Example.show('This was logged in the callback: ' + result);
    }
});

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

    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

    var locale = {
    OK: 'I Suppose',
    CONFIRM: 'Go Ahead',
    CANCEL: 'Maybe Not'
};

bootprompt.addLocale('custom', locale);

bootprompt.prompt({
    title: "This is a prompt with a custom locale! What do you think?",
    locale: 'custom',
    callback: function (result) {
        Example.show('This was logged in the callback: ' + result);
    }
});
  • Prompt with checkbox

    bootprompt.prompt({
    title: "This is a prompt with a set of checkbox inputs!",
    value: ['1', '3'],
    inputType: 'checkbox',
    inputOptions: [{
        text: 'Choice One',
        value: '1',
    },
    {
        text: 'Choice Two',
        value: '2',
    },
    {
        text: 'Choice Three',
        value: '3',
    }],
    callback: function (result) {
        console.log(result);
    }
});

    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

    bootprompt.prompt({
    title: "This is a prompt with a set of radio inputs!",
    message: '<p>Please select an option below:</p>',
    inputType: 'radio',
    inputOptions: [
    {
        text: 'Choice One',
        value: '1',
    },
    {
        text: 'Choice Two',
        value: '2',
    },
    {
        text: 'Choice Three',
        value: '3',
    }
    ],
    callback: function (result) {
        console.log(result);
    }
});

    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 

    bootprompt.prompt({
    title: "This is a prompt with a date input!",
    inputType: 'date',
    callback: function (result) {
        console.log(result);
    }
});

    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 

    bootprompt.prompt({
    title: "This is a prompt with an email input!",
    inputType: 'email',
    callback: function (result) {
        console.log(result);
    }
});

    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 

    bootprompt.prompt({
    title: "This is a prompt with a number input!",
    inputType: 'number',
    callback: function (result) {
        console.log(result);
    }
});

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

  • Prompt with password

    bootprompt.prompt({
    title: "This is a prompt with a password input!",
    inputType: 'password',
    callback: function (result) {
        console.log(result);
    }
});

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

  • Prompt with select

    bootprompt.prompt({
    title: "This is a prompt with select!",
    inputType: 'select',
    inputOptions: [
    {
        text: 'Choose one...',
        value: '',
    },
    {
        text: 'Choice One',
        value: '1',
    },
    {
        text: 'Choice Two',
        value: '2',
    },
    {
        text: 'Choice Three',
        value: '3',
    }
    ],
    callback: function (result) {
        console.log(result);
    }
});

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

  • Prompt with textarea

    bootprompt.prompt({
    title: "This is a prompt with a textarea!",
    inputType: 'textarea',
    callback: function (result) {
        console.log(result);
    }
});

    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 

    bootprompt.prompt({
    title: "This is a prompt with a time input!",
    inputType: 'time',
    callback: function (result) {
        console.log(result);
    }
});

    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 

    bootprompt.prompt({
    title: "This is a prompt with a range input!",
    inputType: 'range',
    min: 0,
    max: 100,
    step: 5,
    value: 35,
    callback: function (result) {
        Example.show('This was logged in the callback: ' + result);
    }
});

    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

    var dialog = bootprompt.dialog({
    message: '<p class="text-center mb-0"><i class="fa fa-spin fa-cog"></i> Please wait while we do something...</p>',
    closeButton: false
});

// do something in the background
dialog.modal('hide');
  • Custom dialog, using init

    Also applies to: Alert, Confirm, Prompt 

    var dialog = bootprompt.dialog({
    title: 'A custom dialog with init',
    message: '<p><i class="fa fa-spin fa-spinner"></i> Loading...</p>'
});

dialog.init(function(){
    setTimeout(function(){
        dialog.find('.bootprompt-body').html('I was loaded after the dialog was shown!');
    }, 3000);
});
  • Custom dialog, with buttons and callbacks 

    var dialog = bootprompt.dialog({
    title: 'A custom dialog with buttons and callbacks',
    message: "<p>This dialog has buttons. Each button has it's own callback function.</p>",
    size: 'large',
    buttons: {
        cancel: {
            label: "I'm a cancel button!",
            className: 'btn-danger',
            callback: function(){
                Example.show('Custom cancel clicked');
            }
        },
        noclose: {
            label: "I don't close the modal!",
            className: 'btn-warning',
            callback: function(){
                Example.show('Custom button clicked');
                return false;
            }
        },
        ok: {
            label: "I'm an OK button!",
            className: 'btn-info',
            callback: function(){
                Example.show('Custom OK clicked');
            }
        }
    }
});