diff --git a/404.html b/404.html index 174f9db4..74ca62c5 100644 --- a/404.html +++ b/404.html @@ -1,284 +1,312 @@ + - - - - - + + + + + + + + + + + + — Bootbox.js — alert, confirm, prompt, and flexible dialogs for the Bootstrap framework + + + + + + + - - - - - - — Bootbox.js — alert, confirm, prompt, and flexible dialogs for the Bootstrap framework - - - - - - + -
- -
-
-
-
-
- +
+
+
+
+
+ -

Page not found :(

-

The requested page could not be found.

-
+
+

404

-
-
-
-
-
+

Page not found :(

+

The requested page could not be found.

+
- -
-
+
+ + + + + -
- - - - - - +
  • + Alert +
    • +
  • + Confirm +
    • +
  • + Prompt +
    • +
  • + Dialog +
    • + +
    + +
  • + + + Documentation + +
    + +
    + Dialogs +
    + +
    + Configuration +
    + +
    +
    • +
  • + + + FAQ / Issues + +
    • + + + - - - - - - - - - - - + +
    + + + + + + +
    + + + + + + + + + + + - + - \ No newline at end of file + diff --git a/documentation.html b/documentation.html index 2ead58ca..2efb9d8a 100644 --- a/documentation.html +++ b/documentation.html @@ -1,2228 +1,2423 @@ + - - - - - - - - - - - - Documentation — Bootbox.js — alert, confirm, prompt, and flexible dialogs for the Bootstrap framework - - - - - - - - + + + + + + + + + + + + Documentation — Bootbox.js — alert, confirm, prompt, and flexible dialogs for the Bootstrap + framework + + + + + + + + + -
    - + +
    +
    +
    +
    +
    +

    Documentation

    +

    + Currently viewing documentation for version 6.0.0. + Other versions: 5.x · 4.x · 3.x +

    + +
    +
    +
    +

    Alert

    + 
    bootbox.alert(string|element message, [function callback]);
    +
    +
    +

    + A simple alert dialog with a single button. Pressing the ESC key or + clicking + the close button () dismisses the dialog. +

    + +
    +

    Basic Usage

    +
    +

    + This is the simplest usage of Bootbox, requiring only the text of the message you wish to + show. +

    +
    + 
    bootbox.alert('Your message here…');
+
    +
    +
    Example bb.1
    +
    +
    -
    - +
    +
    -
    Your message here…
    +
    Your message here…
    - +
    +
    +
    - -
    -

    - If you have code that should not be evaluated until the user has dismissed the alert - (see Bootbox Limitations below), call it within the callback function: -

    - 
    bootbox.alert('Your message here…', function() {
-    /* your callback code */ 
-});
    -

    Formatted text

    -

    Your message can also contain HTML.

    -
    - 
    bootbox.alert('Your message <b>here…</b>');
    -
    -
    Example bb.2
    -
    -
    +

    + If you have code that should not be evaluated until the user has dismissed the alert + (see Bootbox Limitations below), call it within the callback + function: +

    + 
    bootbox.alert('Your message here…',
+                            function() {
+                            /* your callback code */
+                            });
    +

    Formatted text

    +

    Your message can also contain HTML.

    +
    + 
    bootbox.alert('Your message
+                              <b>here…</b>');
    +
    +
    Example bb.2
    +
    +
    -
    - +
    +
    -
    Your message here…
    +
    Your message here…
    - +
    +
    +
    -
    -
    -

    You can also pass a reference to a jQuery-selected element.

    -
    - 
    <div id="message-template">Your message <b>here…</b></div>
-<script>
-    let template = $('#message-template');
-    bootbox.alert(template);
-</script>
    -
    -
    Example bb.2b
    -
    -
    +

    You can also pass a reference to a jQuery-selected element.

    +
    + 
    <div id="message-template">Your message
+                              <b>here…</b></div>
+                              <script>
+                              let template = $('#message-template');
+                              bootbox.alert(template);
+                              </script>
    +
    +
    Example bb.2b
    +
    +
    -
    - +
    +
    -
    Your message here…
    +
    Your message here…
    - +
    +
    +
    -
    -
    -
    -
    - -
    -

    Advanced Usage

    -
    - 
    bootbox.alert(object options);
    -

    - Alerts can be customized, using the options described below. Here's an example of - a small alert, using size: -

    -
    - 
    bootbox.alert({
-    size: 'small',
-    title: 'Your Title',
-    message: 'Your message here…',
-    callback: function() { /* your callback code */ }
-});
    -
    -
    Example bb.3
    -
    -
    +
    +
    + +
    +

    Advanced Usage

    +
    + 
    bootbox.alert(object options);
    +

    + Alerts can be customized, using the options described below. + Here's an example of + a small alert, using size: +

    +
    + 
    bootbox.alert({
+                              size: 'small',
+                              title: 'Your Title',
+                              message: 'Your message here…',
+                              callback: function() { /* your callback code */ }
+                              });
    +
    +
    Example bb.3
    +
    +
    -
    Your Title
    - +
    Your Title
    +
    -
    Your message here…
    +
    Your message here…
    - +
    +
    +
    -
    -
    -

    - Requires Bootstrap 3.1.0 or newer. -

    -
    -
    -
    -
    - -
    - -
    -
    -

    Confirm

    - 
    bootbox.confirm(string|element message, function callback);
    -
    -
    -

    - A confirm dialog with a cancel and a confirm button. Pressing the ESC key or clicking close () dismisses - the dialog and invokes the callback as if the user had clicked the Cancel button. -

    -

    - Confirm dialogs require a callback function. -

    - -
    -

    Basic Usage

    -
    -

    - The simplest method of using the bootbox.confirm() dialog requires the text of the message you wish - to show and a callback to handle the user's selection. The callback function is passed a value of true - or false, depending on which button the user pressed. -

    -
    - 
    bootbox.confirm('Are you sure?', function(result) {
-    /* your callback code */ 
-});
    -
    -
    Example bb.4
    -
    -
    +

    + Requires Bootstrap 3.1.0 or newer. +

    +
    +
    +
    +
    + +
    + +
    +
    +

    Confirm

    + 
    bootbox.confirm(string|element message, function callback);
    +
    +
    +

    + A confirm dialog with a cancel and a confirm button. Pressing the ESC key or clicking + close () dismisses + the dialog and invokes the callback as if the user had clicked the Cancel button. +

    +

    + Confirm dialogs require a callback function. +

    + +
    +

    Basic Usage

    +
    +

    + The simplest method of using the bootbox.confirm() dialog requires the text of + the message you wish + to show and a callback to handle the user's selection. The callback function is passed a value + of true + or false, depending on which button the user pressed. +

    +
    + 
    bootbox.confirm('Are you sure?', function(result)
+                              {
+                              /* your callback code */
+                              });
    +
    +
    Example bb.4
    +
    +
    -
    - +
    +
    -
    Are you sure?
    +
    Are you sure?
    - - + +
    +
    +
    - -
    -
    -
    Please note:
    -

    - All Bootstrap modals, unlike native alerts, confirms, or prompts, are non-blocking. - Keep that in mind when using the bootbox.confirm() dialog, as it is not a drop-in replacement for native confirm dialogs. - Any code that depends on the user's selection must be placed in the callback function. -

    -
    -
    -
    - -
    -

    Advanced Usage

    -
    - 
    bootbox.confirm(object options);
    -

    - Confirm dialogs can be customized, using the options described below. Here's an example of a small - confirm, using size: -

    -
    - 
    bootbox.confirm({ 
-    size: 'small',
-    message: 'Are you sure?',
-    callback: function(result) { /* result is a boolean; true = OK, false = Cancel*/ }
-});
    -
    -
    Example bb.5
    -
    -
    +
    +
    Please note:
    +

    + All Bootstrap modals, unlike native alerts, confirms, or prompts, are non-blocking. + Keep that in mind when using the bootbox.confirm() dialog, as it is not + a drop-in replacement for native confirm dialogs. + Any code that depends on the user's selection must be placed in the callback + function. +

    +
    +
    +
    + +
    +

    Advanced Usage

    +
    + 
    bootbox.confirm(object options);
    +

    + Confirm dialogs can be customized, using the options described + below. Here's an example of a small + confirm, using size: +

    +
    + 
    bootbox.confirm({
+                              size: 'small',
+                              message: 'Are you sure?',
+                              callback: function(result) { /* result is a boolean; true = OK, false = Cancel*/ }
+                              });
    +
    +
    Example bb.5
    +
    +
    -
    - +
    +
    -
    Are you sure?
    +
    Are you sure?
    - - + +
    +
    +
    -
    -
    -

    - Requires Bootstrap 3.1.0 or newer. -

    -
    -
    -
    - - -
    - -
    -
    -

    Prompt

    - 
    bootbox.prompt(string|element title, function callback);
    -
    -
    -

    - A dialog which prompts for user input. Pressing the ESC key or clicking close () dismisses the dialog - and invokes the callback as if the user had clicked the Cancel button. -

    -

    - Prompt dialogs require a callback function. -

    - -
    -

    Basic Usage

    -
    -

    - The simplest usage of the bootbox.prompt() dialog requires the text of the message you wish to show - and a callback to handle the user's input. The value entered will be null if the user cancelled - or dismissed the dialog; otherwise it is passed the value of the text input. -

    -
    - 
    bootbox.prompt('What is your name?', function(result) {
-    /* your callback code */ 
-});
    -
    -
    Example bb.6
    -
    -
    +

    + Requires Bootstrap 3.1.0 or newer. +

    +
    +
    +
    +
    + +
    + +
    +
    +

    Prompt

    + 
    bootbox.prompt(string|element title, function callback);
    +
    +
    +

    + A dialog which prompts for user input. Pressing the ESC key or clicking close () dismisses the dialog + and invokes the callback as if the user had clicked the Cancel button. +

    +

    + Prompt dialogs require a callback function. +

    + +
    +

    Basic Usage

    +
    +

    + The simplest usage of the bootbox.prompt() dialog requires the text of the + message you wish to show + and a callback to handle the user's input. The value entered will be null if the + user cancelled + or dismissed the dialog; otherwise it is passed the value of the text input. +

    +
    + 
    bootbox.prompt('What is your name?',
+                              function(result) {
+                              /* your callback code */
+                              });
    +
    +
    Example bb.6
    +
    +
    -
    What is your name?
    - +
    What is your name?
    +
    -
    -
    - -
    -
    +
    +
    + +
    +
    - - + +
    +
    +
    - -
    -
    -
    Please note:
    -

    - All Bootstrap modals, unlike native alerts, confirms, or prompts, are non-blocking. - Keep that in mind when using the bootbox.prompt() dialog, as it is not a drop-in replacement for native prompt dialogs. - Any code that depends on the user's input must be placed in the callback function. -

    -
    -
    -
    - -
    -

    Advanced Usage

    -
    - 
    bootbox.prompt(object options);
    -

    - Prompt dialogs can also be customized, using the options described below. Here's an example of a - small prompt, using size: -

    -
    - 
    bootbox.prompt({ 
-    size: 'small',
-    title: 'What is your name?',
-    callback: function(result) { 
-        /* result = String containing user input if OK clicked or null if Cancel clicked */ 
-    }
-});
    -
    -
    Example bb.7
    -
    -
    +
    +
    Please note:
    +

    + All Bootstrap modals, unlike native alerts, confirms, or prompts, are non-blocking. + Keep that in mind when using the bootbox.prompt() dialog, as it is not a + drop-in replacement for native prompt dialogs. + Any code that depends on the user's input must be placed in the callback function. +

    +
    +
    +
    + +
    +

    Advanced Usage

    +
    + 
    bootbox.prompt(object options);
    +

    + Prompt dialogs can also be customized, using the options described + below. Here's an example of a + small prompt, using size: +

    +
    + 
    bootbox.prompt({
+                              size: 'small',
+                              title: 'What is your name?',
+                              callback: function(result) {
+                              /* result = String containing user input if OK clicked or null if Cancel clicked */
+                              }
+                              });
    +
    +
    Example bb.7
    +
    +
    -
    What is your name?
    - +
    What is your name?
    +
    -
    -
    - -
    -
    +
    +
    + +
    +
    - - + +
    +
    +
    -
    -
    -

    - Requires Bootstrap 3.1.0 or newer. -

    -
    -
    - 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 values from your message. -

    -
    -
    -
    -
    - - -
    - -
    -
    -

    Prompt Dialog Options

    -
    -

    - Prompt dialogs are (by default) single-line text inputs. You can modify the type of prompt Bootbox generates using the prompt-only - options below. -

    -
    -
    value
    -
    -

    - Type: - StringNumberArray -

    -

    - Default: - null -

    -

    - You can set the initial value of the prompt using the value option. -

    -

    - - To pre-select more than one value (when using the checkbox or multiple select type), use an array - for the value option. Note that the type of each item should match the type - from inputOptions. -

    -
    +

    + Requires Bootstrap 3.1.0 or newer. +

    +
    +
    + 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 values from your message. +

    +
    +
    +
    +
    + -
    inputType
    -
    -

    - Type: - String -

    -

    - Default: - text -

    -

    - Changes the type of input generated for the prompt dialog. -

    -

    - - To pre-select more than one value (when using the checkbox or multiple select type), use an array - for the value option. Note that the type of each item should match the type - from inputOptions. -

    -

    - Valid values, with their class selectors: -

    - - - +
    + +
    +
    +

    Prompt Dialog Options

    +
    +

    + Prompt dialogs are (by default) single-line text inputs. You can modify the type of prompt + Bootbox generates using the prompt-only + options below. +

    +
    +
    value
    +
    +

    + Type: + StringNumberArray +

    +

    + Default: + null +

    +

    + You can set the initial value of the prompt using the value option. +

    +

    + + To pre-select more than one value (when using the checkbox or multiple select type), use an + array + for the value option. Note that the type of each item should match the type + from inputOptions. +

    +
    + +
    inputType
    +
    +

    + Type: + String +

    +

    + Default: + text +

    +

    + Changes the type of input generated for the prompt dialog. +

    +

    + + To pre-select more than one value (when using the checkbox or multiple select type), use an + array + for the value option. Note that the type of each item should match the type + from inputOptions. +

    +

    + Valid values, with their class selectors: +

    +
    + + - - - - + + + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - -
    Name Class
    text (default) bootbox-input-text
    password bootbox-input-password
    textarea bootbox-input-textarea
    email bootbox-input-email
    select bootbox-input-select
    checkbox bootbox-input-checkbox
    radio bootbox-input-radio
    date bootbox-input-date
    time bootbox-input-time
    number bootbox-input-number
    range bootbox-input-range
    -

    - Additionally, checkbox and radiobuttons are wrapped in a parent element, bootbox-checkbox-list - and bootbox-radiobutton-list, respectively. -

    -

    - email, date, time, number, and range - all require browser support to function properly. You may want to consult caniuse.com - to determine if your target browsers support the input types you are intending to use. -

    -
    Date input type and browser support
    -

    - At the time this is written, every major browser which supports the date input type will only - accept date values in the ISO 8601 format, which (for a short date) is YYYY-MM-DD, where -

    - 
    YYYY = four-digit year
-MM   = two-digit month (01 = January, etc.)
-DD   = two-digit day of month (01 through 31)
-
    -

    - See https://en.wikipedia.org/wiki/ISO_8601 -

    -
    Range input and default value
    -

    - Please note that, when using the range input type, the default min value - is 0 and the default max value is 100 (see - MDN). - If you attempt to set the default value of the input to something less than your min value or greater than your max value, - the input will default to the respective value. -

    -
    + + + +

    + Additionally, checkbox and radiobuttons are wrapped in a parent element, + bootbox-checkbox-list + and bootbox-radiobutton-list, respectively. +

    +

    + email, date, time, number, and + range + all require browser support to function properly. You may want to consult caniuse.com + to determine if your target browsers support the input types you are intending to use. +

    +
    Date input type and browser support
    +

    + At the time this is written, every major browser which supports the date input + type will only + accept date values in the ISO 8601 format, which (for a short date) is + YYYY-MM-DD, where +

    + 
    YYYY = four-digit year
+                            MM = two-digit month (01 = January, etc.)
+                            DD = two-digit day of month (01 through 31)
+
    +

    + See https://en.wikipedia.org/wiki/ISO_8601 +

    +
    Range input and default value
    +

    + Please note that, when using the range input type, the default min + value + is 0 and the default max value is 100 (see + MDN). + If you attempt to set the default value of the input to something less than your min value + or greater than your max value, + the input will default to the respective value. +

    + -
    inputOptions
    -
    -

    - Type: - Array -

    -

    - Default: - null -

    -

    - If you specify select, checkbox, or radio as the - input type, you must also supply an array of valid values in the format of: -

    - 
    {
-    text: '',
-    value: '',
-    group: ''
-}
    -

    - group is an optional property for populating the <select>; - if specified, <optgroup> elements will be generated for each group - value found in the inputOptions array. -

    -
    +
    + inputOptions
    +
    +

    + Type: + Array +

    +

    + Default: + null +

    +

    + If you specify select, checkbox, or radio as the + input type, you must also supply an array of valid values in the format of: +

    + 
    {
+                              text: '',
+                              value: '',
+                              group: ''
+                              }
    +

    + group is an optional property for populating the <select>; + if specified, <optgroup> elements will be generated for each group + value found in the inputOptions array. +

    +
    -
    min, max
    -
    -

    - Type: - StringNumberDate StringTime string -

    -

    - Default: - null -

    -

    - Types: - - date, - time, - number, - range - -

    -

    - The min or max value for the <input> element. -

    -

    - For range and number, min/max must be - a numeric value. -

    -

    - For time, min/max must a valid partial time value, - in the form of HH:MM:SS, where -

    - 
    HH = any zero-padded value between 00 and 23
-MM = any zero-padded value between 00 and 59
-SS = any zero-padded value between 00 and 59
-
    -

    - For date, min/max must a date value in the form - of YYYY-MM-DD, where -

    - 
    YYYY = four-digit year
-MM   = two-digit month (01 = January, etc.)
-DD   = two-digit day of month (01 through 31)
-
    -

    - See the MDN article for - min or - max for more information. -

    -
    Number input and min/max values
    -

    - When using the number input type, note that a value may be manually entered which is less than your min or greater than - your max (MDN). - The input will, however, report that it is invalid, which can be used in conjunction with the required - option to prevent the value from being accepted. -

    -
    +
    min, max +
    +
    +

    + Type: + StringNumberDate + StringTime string +

    +

    + Default: + null +

    +

    + Types: + + date, + time, + number, + range + +

    +

    + The min or max value for the <input> element. +

    +

    + For range and number, min/max must be + a numeric value. +

    +

    + For time, min/max must a valid partial time value, + in the form of HH:MM:SS, where +

    + 
    HH = any zero-padded value between 00 and 23
+                            MM = any zero-padded value between 00 and 59
+                            SS = any zero-padded value between 00 and 59
+
    +

    + For date, min/max must a date value in the form + of YYYY-MM-DD, where +

    + 
    YYYY = four-digit year
+                            MM = two-digit month (01 = January, etc.)
+                            DD = two-digit day of month (01 through 31)
+
    +

    + See the MDN article for + min + or + max + for more information. +

    +
    Number input and min/max values
    +

    + When using the number input type, note that a value may be manually entered + which is less than your min or greater than + your max (MDN). + The input will, however, report that it is invalid, which can be used in conjunction with + the required + option to prevent the value from being accepted. +

    +
    -
    step
    -
    -

    - Type: - StringNumber -

    -

    - Default: - null -

    -

    - Types: - - time, - number, - range - -

    -

    - The step value for the <input> element. -

    -

    - Can be the string value any (the browser default), or a positive, non-zero - numeric value. See - the MDN article for <input> - for more information. -

    -

    - The default step value for number inputs is 1 - (MDN). -

    -
    -

    - Warning: For most browsers, date inputs are buggy in their implementation of step, - so this attribute would likely have no effect. Therefore, we don't set the step attribute - for date inputs. -

    -

    - See the MDN article +

    step
    +
    +

    + Type: + StringNumber +

    +

    + Default: + null +

    +

    + Types: + + time, + number, + range + +

    +

    + The step value for the <input> element. +

    +

    + Can be the string value any (the browser default), or a positive, non-zero + numeric value. See + the MDN + article for <input> for more information. -

    - -
    +

    +

    + The default step value for number inputs is 1 + (MDN). +

    +
    +

    + Warning: For most browsers, date inputs + are buggy in their implementation of step, + so this attribute would likely have no effect. Therefore, we don't set the step attribute + for date inputs. +

    +

    + See the + MDN article + for more information. +

    +
    + -
    maxlength
    -
    -

    - Type: - Number -

    -

    - Default: - null -

    -

    - Types: - - text, - textarea, - email, - password - -

    -

    - Set the maxlength option to limit the number of characters entered into a - text-based input. Must be a positive, non-zero numeric value. -

    -
    +
    maxlength +
    +
    +

    + Type: + Number +

    +

    + Default: + null +

    +

    + Types: + + text, + textarea, + email, + password + +

    +

    + Set the maxlength option to limit the number of characters entered into a + text-based input. Must be a positive, non-zero numeric value. +

    +
    -
    pattern
    -
    -

    - Type: - String -

    -

    - Default: - null -

    -

    - Types: - - All, except - select, - radio, - checkbox - -

    -

    - Set the pattern option to require the input value to follow a specific format. - If pattern is set and a value has been entered by your user, the prompt will not - close if the input value fails pattern validation. -

    -

    - Can be added as a fallback for email, time, date, number - or range inputs where native browser support for those types is lacking. -

    -
    +
    pattern +
    +
    +

    + Type: + String +

    +

    + Default: + null +

    +

    + Types: + + All, except + select, + radio, + checkbox + +

    +

    + Set the pattern option to require the input value to follow a specific format. + If pattern is set and a value has been entered by your user, the prompt will + not + close if the input value fails pattern validation. +

    +

    + Can be added as a fallback for email, time, date, + number + or range inputs where native browser support for those types is lacking. +

    +
    -
    placeholder
    -
    -

    - Type: - String -

    -

    - Default: - null -

    -

    - Types: - - All * - -

    -

    - Set the placeholder option to provide a small amount of "helper" text - within a text-based input. -

    -

    - There is no real limit on the amount of text you may use for your placeholder, but - keep in mind that the placeholder disappears when the input has focus (depending on - the browser) or has a value. Use the message option to provide help text - which you want to always be visible or that is important. -

    -

    - * If specified for time, date, number, or range inputs, - your users will normally only see the placeholder where native browser support for those types is lacking. We also - will set the placeholder attribute on a select, although that's not a valid/supported attribute. -

    -
    +
    + placeholder
    +
    +

    + Type: + String +

    +

    + Default: + null +

    +

    + Types: + + All * + +

    +

    + Set the placeholder option to provide a small amount of "helper" text + within a text-based input. +

    +

    + There is no real limit on the amount of text you may use for your placeholder, but + keep in mind that the placeholder disappears when the input has focus (depending on + the browser) or has a value. Use the message option to provide help text + which you want to always be visible or that is important. +

    +

    + * If specified for time, date, number, or + range inputs, + your users will normally only see the placeholder where native browser support for those + types is lacking. We also + will set the placeholder attribute on a select, although that's not a + valid/supported attribute. +

    +
    -
    required
    -
    -

    - Type: - Boolean -

    -

    - Default: - null -

    -

    - Set the required option to true to require an input value. - When true, the prompt will not close if the input value is null, - an empty string, or fails the input type's built-in validation constraints. -

    -

    - - If used with the checkbox inputType, each checkbox must be checked for the prompt to be valid. -

    -
    +
    required +
    +
    +

    + Type: + Boolean +

    +

    + Default: + null +

    +

    + Set the required option to true to require an input value. + When true, the prompt will not close if the input value is null, + an empty string, or fails the input type's built-in validation constraints. +

    +

    + + If used with the checkbox inputType, each checkbox must be checked for the + prompt to be valid. +

    +
    -
    multiple
    -
    -

    - Type: - Boolean -

    -

    - Default: - null -

    -

    - Types: - select -

    -

    - Set the multiple option to true to allow users to - select more than one option when using the select input type. -

    -

    - - To pre-select more than one value, use an array for the value option. Note that the type - of each item should match the type from inputOptions. -

    -
    +
    multiple +
    +
    +

    + Type: + Boolean +

    +

    + Default: + null +

    +

    + Types: + select +

    +

    + Set the multiple option to true to allow users to + select more than one option when using the select input type. +

    +

    + + To pre-select more than one value, use an array for the value option. Note that + the type + of each item should match the type from inputOptions. +

    +
    -
    rows
    -
    -

    - Type: - Number -

    -

    - Default: - null -

    -

    - Types: - textarea -

    -

    - Set the rows option to a non-zero number to set the rows attribute - when using the textarea input type. If omitted, the rows attribute is - not set and the textarea will render with the browser's default number of rows. +

    rows
    +
    +

    + Type: + Number +

    +

    + Default: + null +

    +

    + Types: + textarea +

    +

    + Set the rows option to a non-zero number to set the rows attribute + when using the textarea input type. If omitted, the rows attribute + is + not set and the textarea will render with the browser's default number of rows. +

    +
    + +

    + Please see the Examples page for more examples of prompt + dialogs. +

    + + + + +
    + +
    +
    +

    Custom Dialog

    + 
    bootbox.dialog(object options);
    +
    +
    +

    + A completely customisable dialog method which takes a single argument - an options object.

    - - -

    - Please see the Examples page for more examples of prompt - dialogs. -

    -
    - -
    - -
    - -
    -
    -

    Custom Dialog

    - 
    bootbox.dialog(object options);
    -
    -
    -

    - A completely customisable dialog method which takes a single argument - an options object. -

    - -
    -

    Note: onEscape

    -
    -

    - Custom dialogs do not close automatically when the ESC key is pressed; you must implement - this behavior yourself using the onEscape option. -

    -
    -
    - -
    -

    Basic Usage

    -
    -

    - The minimum required to create a custom dialog is the message option. -

    -

    - Here's an example using message and closeButton: false, which will create - a non-dismissable dialog (useful as a "loading" overlay). -

    -
    - 
    bootbox.dialog({ 
-    message: '<div class="text-center"><i class="fas fa-spin fa-spinner"></i> Loading...</div>', 
-    closeButton: false 
-});
    -
    -
    Example bb.8
    -
    -
    + +
    +

    Note: onEscape

    +
    +

    + Custom dialogs do not close automatically when the ESC key is pressed; you + must implement + this behavior yourself using the onEscape option. +

    +
    +
    + +
    +

    Basic Usage

    +
    +

    + The minimum required to create a custom dialog is the message option. +

    +

    + Here's an example using message and closeButton: false, which will + create + a non-dismissable dialog (useful as a "loading" overlay). +

    +
    + 
    bootbox.dialog({
+                              message: '<div class="text-center"><i class="fas fa-spin
+                              fa-spinner"></i> Loading...</div>',
+                              closeButton: false
+                              });
    +
    +
    Example bb.8
    +
    +
    -
    -
    Loading...
    -
    +
    +
    Loading...
    +
    +
    +
    -
    -
    -
    -
    - -
    -

    Advanced Usage

    -
    -

    - As noted above, the only required option for a custom dialog is message. Also, - custom dialogs do not utilize a global callback; - each button you add should have it's own callback function. Here's an example with many of - the options utilized: -

    -
    - 
    bootbox.dialog({ 
-    title: 'Custom Dialog Example',
-    message: '<p>This dialog demonstrates many of the options available when using the Bootbox library</p>',
-    size: 'large',
-    onEscape: true,
-    backdrop: true,
-    buttons: {
-        fee: {
-            label: 'Fee',
-            className: 'btn-primary',
-            callback: function(){
-                
-            }
-        },
-        fie: {
-            label: 'Fie',
-            className: 'btn-info',
-            callback: function(){
-                
-            }
-        },
-        foe: {
-            label: 'Foe',
-            className: 'btn-success',
-            callback: function(){
-                
-            }
-        },
-        fum: {
-            label: 'Fum',
-            className: 'btn-danger',
-            callback: function(){
-                
-            }
-        }
-    }
-});
    -
    -
    Example bb.9
    -
    -
    +
    +
    + +
    +

    Advanced Usage

    +
    +

    + As noted above, the only required option for a custom dialog is message. Also, + custom dialogs do not utilize a global callback; + each button you add should have it's own callback function. Here's an example with many of + the options utilized: +

    +
    + 
    bootbox.dialog({
+                              title: 'Custom Dialog Example',
+                              message: '<p>This dialog demonstrates many of the options available when using the
+                              Bootbox library</p>',
+                              size: 'large',
+                              onEscape: true,
+                              backdrop: true,
+                              buttons: {
+                              fee: {
+                              label: 'Fee',
+                              className: 'btn-primary',
+                              callback: function(){
+
+                              }
+                              },
+                              fie: {
+                              label: 'Fie',
+                              className: 'btn-info',
+                              callback: function(){
+
+                              }
+                              },
+                              foe: {
+                              label: 'Foe',
+                              className: 'btn-success',
+                              callback: function(){
+
+                              }
+                              },
+                              fum: {
+                              label: 'Fum',
+                              className: 'btn-danger',
+                              callback: function(){
+
+                              }
+                              }
+                              }
+                              });
    +
    +
    Example bb.9
    +
    +
    -
    Custom Dialog Example
    - +
    Custom Dialog Example
    +
    -
    -

    This dialog demonstrates many of the options available when using the Bootbox library

    -
    +
    +

    This dialog demonstrates many of the options available when using the Bootbox + library

    +
    - - - - + + + +
    +
    +
    -
    -
    -

    - Please see the Examples page for more examples of custom - dialogs. -

    -
    -
    -
    -
    - -
    - -
    -
    -

    Dialog Options

    -
    -
    -

    - The options shown below apply to all Bootbox dialogs. Options which are specific to prompt - dialogs can be found above. -

    -
    -
    message
    -
    -

    - Type: - StringElement -

    -

    - Default: null -

    -

    - - Required for alert, confirm, and custom dialogs - -

    -

    - Text (or markup ) - displayed in the dialog. -

    -
    - -
    title
    -
    -

    - Type: - StringElement -

    -

    - Default: null -

    -

    - Required for prompt -

    -

    - Adds a header to the dialog and places this text - (or markup ) - in an <h5> (Bootstrap 4) or <h4> (Bootstrap 3 and under) element. -

    -
    - -
    callback
    -
    -

    - Type: - Function -

    -

    - Default: null -

    -

    - - Required for confirm and prompt - - - Not called for custom dialogs - -

    -

    - An alert callback should not supply an argument; it will be ignored if it does: -

    - 
    bootbox.alert({ 
-    message: "I'm an alert!", 
-    callback: function() {
-    } 
-});
    -

    - Confirm and prompt callbacks must supply an argument for the result; for confirm, - it will be a - true or false value, while the prompt result will hold the - value(s) entered by the user: -

    - 
    bootbox.confirm('Are you sure?', function(result) {
-    // result will be true or false
-});
    -

    - or -

    - 
    bootbox.prompt('What is your name?', function(result) {
-    if (result === null) {
-        // Prompt dismissed
-    } else {
-        // result has a value
-    }
-});
    -

    - For any callback, if you do not want the dialog to close when the callback completes, add return false; - as the last line of the callback. You will then need to manually dismiss the dialog using - the modal() function or bootbox.hideAll(): -

    - 
    let dialog = bootbox.prompt('What is your name?', function(result) {
-    if (result === null) {
-        // Prompt dismissed
-    } else {
-        // result has a value
-        dialog.modal('hide');
-    } 
-
-    return false;
-});
    -
    - -
    onEscape
    -
    -

    - Type: - BooleanFunction -

    -

    - Default: - true for alert, confirm, and prompt; null for custom dialogs. -

    -

    - Allows the user to dismiss the dialog by hitting ESC, which will invoke this - function. -

    -
    Options:
    - - - - - - - - - - - - - - - - - -
    Undefined (null)No callback function has been provided.
    trueHitting the ESC dismisses the dialog.
    falseHitting the ESC does not dismiss the dialog.
    -
    - -
    onShow
    -
    -

    - Type: - Function -

    -

    - Default: null -

    -

    - Use onShow to bind a callback function to the show.bs.modal event, which is - called just before the modal is shown. See the - Bootstrap docs for more information. -

    - 
    bootbox.alert({ 
-    message: "I'm an alert!", 
-    onShow: function(e) {
-        /* e is the show.bs.modal event */
-    } 
-})
    -

    - Requires Bootbox 5.4.0 or newer. -

    -
    - -
    onShown
    -
    -

    - Type: - Function -

    -

    - Default: null -

    -

    - Use onShown to bind a callback function to the shown.bs.modal event, which is - called just after the modal is shown. See the - Bootstrap docs for more information. -

    - 
    bootbox.alert({ 
-    message: "I'm an alert!", 
-    onShown: function(e) {
-        /* e is the shown.bs.modal event */
-    } 
-})
    -

    - Requires Bootbox 5.4.0 or newer. -

    -
    - -
    onHide
    -
    -

    - Type: - Function -

    -

    - Default: null -

    -

    - Use onHide to bind a callback function to the hide.bs.modal event, which is - called just before the modal is hidden. See the - Bootstrap docs for more information. -

    - 
    bootbox.alert({ 
-    message: "I'm an alert!", 
-    onHide: function(e) {
-        /* e is the hide.bs.modal event */
-    } 
-})
    -

    - Requires Bootbox 5.4.0 or newer. -

    -
    - -
    onHidden
    -
    -

    - Type: - Function -

    -

    - Default: null -

    -

    - Use onHidden to bind a callback function to the hidden.bs.modal event, which is - called just after the modal is hidden. See the - Bootstrap docs for more information. -

    - 
    bootbox.alert({ 
-    message: "I'm an alert!", 
-    onHidden: function(e) {
-        /* e is the hidden.bs.modal event */
-    } 
-})
    -

    - Requires Bootbox 5.4.0 or newer. -

    -
    - -
    show
    -
    -

    - Type: - Boolean -

    -

    - Default: true -

    -

    Whether the dialog should be shown immediately.

    -
    - -
    backdrop
    -
    -

    - Type: - Boolean -

    -

    - Default: null -

    -

    - Whether the dialog should be have a backdrop or not. Also determines whether clicking on the backdrop dismisses the modal. -

    -
    Options:
    - - - - - - - - - - - - - - - - - -
    Undefined (null)The backdrop is displayed, but clicking on it has no effect.
    true * The backdrop is displayed, and clicking on it dismisses the dialog.
    falseThe backdrop is not displayed.
    -

    - * When this value is set to true, the dialog will only dismiss - when onEscape is also set to true or some callback function. -

    -
    - -
    closeButton
    -
    -

    - Type: - Boolean -

    -

    - Default: true -

    -

    - Whether the dialog should have a close button () or not. -

    -
    - -
    animate
    -
    -

    - Type: - Boolean -

    -

    - Default: true -

    -

    - Animate the dialog in and out (requires a browser which supports CSS animations). -

    -
    - -
    className
    -
    -

    - Type: - String -

    -

    - Default: null -

    -

    - An additional class to apply to the dialog wrapper. -

    -
    - -
    size
    -
    -

    - Type: - String -

    -

    - Default: null -

    -

    - Adds the relevant Bootstrap modal size class to the dialog wrapper. Valid values are: -

    - - - - - - - - - - - - - -
    Small'small', 'sm'
    Large'large', 'lg'
    Extra large'extra-large', 'xl'
    -

    - Requires Bootstrap 3.1.0 or newer. Extra-large requires Bootstrap 4.2.0 or newer. -

    -
    - -
    locale
    -
    -

    - Type: - String -

    -

    - Sets the locale to use per dialog — this option does not override the - default locale. Other dialogs will still use the default locale. -

    -

    - The locale settings are used to translate the three standard button labels: OK, CONFIRM, CANCEL -

    -

    - See the note on locales below. -

    -
    - -
    buttons
    -
    -

    - Type: - Object -

    -

    - Buttons are defined as JavaScript objects. The minimum shortform requirement to define a button is: -

    - 
    'Your button text': function() { }
    -

    - The complete definition of a button object is: -

    - 
    buttonName : {
-    label: 'Your button text',
-    className: 'some-class',
-    callback: function() { 
-    }
-}
    -
    Options:
    -
    - - - - - - - - - - - - - - - - - -
    alert - ok -
    confirm - cancel, confirm -
    prompt - cancel, confirm -
    -
    -

    - Each of the available button options can be overridden to use custom content - (text or HTML ) - and CSS styles. For example: -

    - 
    bootbox.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) {
-        // ...
-    }
-});
    -

    - You cannot override the callbacks for the alert, confirm, and prompt dialog's - buttons. -

    -
    - -
    swapButtonOrder
    -
    -

    - Type: - Boolean -

    -

    - Default: false -

    -

    - Flips the order in which the buttons are rendered, from cancel/confirm to confirm/cancel. -

    -
    - -
    centerVertical
    -
    -

    - Type: - Boolean -

    -

    - Default: false -

    -

    - If true, the modal-dialog-centered - class will be added to the dialog wrapper. -

    -

    - Requires Bootstrap 4.1.0 or newer. -

    -
    - -
    scrollable
    -
    -

    - Type: - Boolean -

    -

    - Default: false -

    -

    - If true, the modal-dialog-scrollable - class will be added to the dialog wrapper. Enable this option to have the content of long modals automatically scroll. -

    -

    - Requires Bootstrap 4.3.0 or newer. -

    -
    -
    -
    -
    - -
    - -
    -
    -

    - Available Locales -

    -
    -
    -

    - Locales are used to provide a translation for each of the built-in command buttons (OK, CANCEL, and CONFIRM). -

    -
    -

    Locales Index

    -
    -

    - The following locales are available (see the table below). You can find each of these locales rendered on the - Examples page. -

    -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +

    + Please see the Examples page for more examples of custom + dialogs. +

    + + + + + +
    + +
    +
    +

    Dialog Options

    +
    +
    +

    + The options shown below apply to all Bootbox dialogs. Options which are specific to prompt + dialogs can be found above. +

    +
    +
    message
    +
    +

    + Type: + StringElement +

    +

    + Default: null +

    +

    + + Required for alert, confirm, and custom dialogs + +

    +

    + Text (or markup ) + displayed in the dialog. +

    +
    + +
    title
    +
    +

    + Type: + StringElement +

    +

    + Default: null +

    +

    + Required for prompt +

    +

    + Adds a header to the dialog and places this text + (or markup ) + in an <h5> (Bootstrap 4) or <h4> (Bootstrap 3 and under) + element. +

    +
    + +
    callback
    +
    +

    + Type: + Function +

    +

    + Default: null +

    +

    + + Required for confirm and prompt + + + Not called for custom dialogs + +

    +

    + An alert callback should not supply an argument; it will be ignored if it does: +

    + 
    bootbox.alert({
+                            message: "I'm an alert!",
+                            callback: function() {
+                            }
+                            });
    +

    + Confirm and prompt callbacks must supply an argument for the result; for confirm, + it will be a + true or false value, while the prompt result will hold the + value(s) entered by the user: +

    + 
    bootbox.confirm('Are you sure?', function(result) {
+                            // result will be true or false
+                            });
    +

    + or +

    + 
    bootbox.prompt('What is your name?',
+                            function(result) {
+                            if (result === null) {
+                            // Prompt dismissed
+                            } else {
+                            // result has a value
+                            }
+                            });
    +

    + For any callback, if you do not want the dialog to close when the callback completes, add + return false; + as the last line of the callback. You will then need to manually dismiss the dialog using + the modal() function or bootbox.hideAll(): +

    + 
    let dialog = bootbox.prompt('What is your name?',
+                            function(result) {
+                            if (result === null) {
+                            // Prompt dismissed
+                            } else {
+                            // result has a value
+                            dialog.modal('hide');
+                            }
+
+                            return false;
+                            });
    +
    + +
    onEscape
    +
    +

    + Type: + BooleanFunction +

    +

    + Default: + true for alert, confirm, and prompt; null for custom dialogs. +

    +

    + Allows the user to dismiss the dialog by hitting ESC, which will invoke this + function. +

    +
    Options:
    +
    KeyName
    arArabic
    azAzerbaijani
    bg-BGBulgarian
    csCzech
    daDanish
    deGerman
    elGreek
    enEnglish
    esSpanish / Español
    etEstonian
    euBasque
    faFarsi / Persian
    fiFinnish
    frFrench / Français
    heHebrew
    hrCroatian
    huHungarian
    idIndonesian
    itItalian
    jaJapanese
    kaGeorgian
    koKorean
    ltLithuanian
    lvLatvian
    nlDutch
    noNorwegian
    plPolish
    ptPortuguese
    pt-BRPortuguese - Brasil
    ruRussian
    skSlovak
    slSlovenian
    sqAlbanian
    svSwedish
    swSwahili
    taTamil
    thThai
    trTurkish
    + + + + + + + + + + + + + + + + +
    Undefined (null)No callback function has been provided.
    trueHitting the ESC dismisses the dialog.
    falseHitting the ESC does not dismiss the dialog.
    + + +
    onShow
    +
    +

    + Type: + Function +

    +

    + Default: null +

    +

    + Use onShow to bind a callback function to the show.bs.modal event, + which is + called just before the modal is shown. See the + Bootstrap + docs for more information. +

    + 
    bootbox.alert({
+                            message: "I'm an alert!",
+                            onShow: function(e) {
+                            /* e is the show.bs.modal event */
+                            }
+                            })
    +

    + Requires Bootbox 5.4.0 or newer. +

    +
    + +
    onShown
    +
    +

    + Type: + Function +

    +

    + Default: null +

    +

    + Use onShown to bind a callback function to the shown.bs.modal event, + which is + called just after the modal is shown. See the + Bootstrap + docs for more information. +

    + 
    bootbox.alert({
+                            message: "I'm an alert!",
+                            onShown: function(e) {
+                            /* e is the shown.bs.modal event */
+                            }
+                            })
    +

    + Requires Bootbox 5.4.0 or newer. +

    +
    + +
    onHide
    +
    +

    + Type: + Function +

    +

    + Default: null +

    +

    + Use onHide to bind a callback function to the hide.bs.modal event, + which is + called just before the modal is hidden. See the + Bootstrap + docs for more information. +

    + 
    bootbox.alert({
+                            message: "I'm an alert!",
+                            onHide: function(e) {
+                            /* e is the hide.bs.modal event */
+                            }
+                            })
    +

    + Requires Bootbox 5.4.0 or newer. +

    +
    + +
    onHidden
    +
    +

    + Type: + Function +

    +

    + Default: null +

    +

    + Use onHidden to bind a callback function to the hidden.bs.modal + event, which is + called just after the modal is hidden. See the + Bootstrap + docs for more information. +

    + 
    bootbox.alert({
+                            message: "I'm an alert!",
+                            onHidden: function(e) {
+                            /* e is the hidden.bs.modal event */
+                            }
+                            })
    +

    + Requires Bootbox 5.4.0 or newer. +

    +
    + +
    show
    +
    +

    + Type: + Boolean +

    +

    + Default: true +

    +

    Whether the dialog should be shown immediately.

    +
    + +
    backdrop
    +
    +

    + Type: + Boolean +

    +

    + Default: null +

    +

    + Whether the dialog should be have a backdrop or not. Also determines whether clicking on the + backdrop dismisses the modal. +

    +
    Options:
    + + + + + + + + + + + + + + + + + +
    Undefined (null)The backdrop is displayed, but clicking on it has no effect.
    true * The backdrop is displayed, and clicking on it dismisses the dialog.
    falseThe backdrop is not displayed.
    +

    + * When this value is set to true, the dialog will only dismiss + when onEscape is also set to true or some callback function. +

    +
    + +
    closeButton
    +
    +

    + Type: + Boolean +

    +

    + Default: true +

    +

    + Whether the dialog should have a close button () or not. +

    +
    + +
    animate
    +
    +

    + Type: + Boolean +

    +

    + Default: true +

    +

    + Animate the dialog in and out (requires a browser which supports CSS animations). +

    +
    + +
    className
    +
    +

    + Type: + String +

    +

    + Default: null +

    +

    + An additional class to apply to the dialog wrapper. +

    +
    + +
    size
    +
    +

    + Type: + String +

    +

    + Default: null +

    +

    + Adds the relevant Bootstrap modal size class to the dialog wrapper. Valid values are: +

    + + + + + + + + + + + + + +
    Small'small', 'sm'
    Large'large', 'lg'
    Extra large'extra-large', 'xl'
    +

    + Requires Bootstrap 3.1.0 or newer. Extra-large requires Bootstrap 4.2.0 or newer. +

    +
    + +
    locale
    +
    +

    + Type: + String +

    +

    + Sets the locale to use per dialog — this option does not override the + default locale. Other dialogs will still use the default locale. +

    +

    + The locale settings are used to translate the three standard button labels: OK, CONFIRM, + CANCEL +

    +

    + See the note on locales below. +

    +
    + +
    buttons
    +
    +

    + Type: + Object +

    +

    + Buttons are defined as JavaScript objects. The minimum shortform requirement to define a + button is: +

    + 
    'Your button text': function() { }
    +

    + The complete definition of a button object is: +

    + 
    buttonName : {
+                            label: 'Your button text',
+                            className: 'some-class',
+                            callback: function() {
+                            }
+                            }
    +
    Options:
    +
    + + + + + - + + - - + + - - + + - - -
    ukUkrainianalert + ok +
    zh-CNChinese (People's Republic of China)confirm + cancel, confirm +
    zh-TWChinese (Taiwan / Republic of China)prompt + cancel, confirm +
    -
    -
    -
    -
    -

    Using Locales

    -
    -
    -
    - Please note: -
    -

    - To use any locale other than en, you must do one of the following: -

    -
      -
    • - Use the bootbox.all.js or bootbox.all.min.js file, which includes all locales. -
      • -
    • - Add a reference to bootbox.locales.js or bootbox.locales.min.js after bootbox.js. -
      • -
    • - Add a reference to the target locale file (fr.js to use the French locale, for example), found in the src/locales directory. -
      • -
    • - Add the locale manually, using the addLocale function. -
      • -
    -
    -
    -
    -
    -
    - -
    - -
    -
    -

    Using jQuery Functions with Bootbox

    -
    -
    -
    -

    Basic Usage

    -
    -

    - The object returned from each of the dialog functions is a jQuery object. As such, you can chain most jQuery functions - onto the result of a Bootbox dialog. Here's an example showing how to handle Bootstrap's shown.bs.modal - event, using .on(): -

    - 
    let dialog = bootbox.dialog({
-    /* Your options... */
-});
-
-dialog.on('shown.bs.modal', function(e){
-    // Do something with the dialog just after it has been shown to the user...
-});
    -

    - If you set the show option to false, you can also use Bootstrap's - modal() function to show and hide your - dialog manually: -

    - 
    let dialog = bootbox.dialog({
-    show: false,
-    /* Your options... */
-});
-
-dialog.modal('show');
-
-dialog.modal('hide');
    -
    -
    -
    -
    - -
    - -
    -
    -

    Instance Functions

    -
    -
    -

    - The following functions can be called on an instance of a Bootbox object. -

    -
    -

    init()

    -
    - 
    .init(function handler);
    -

    - Allows the user to supply a function to be called when the dialog gets initialized. -

    - 
    let dialog = bootbox.dialog({
-    /* Your options... */
-});
-
-dialog.init(function(){
-    // Do something with the dialog...
-});
    -

    init() can be called on any of the wrapper functions, as they all return a jQuery object.

    -
    -
    -
    -
    - -
    - -
    -
    -

    Global Functions

    -

    - The following functions are called statically, using the bootbox global. -

    -
    -
    -
    -

    setDefaults()

    -
    - 
    bootbox.setDefaults(object options);
    -

    - This method allows the user to set many of the default options shown in the dialog example. Many of these options are also - applied to the basic wrapper methods and can be overridden whenever the wrapper methods are invoked with - a single options argument: -

    - 
    bootbox.setDefaults({
-    /**
-    * @optional String
-    * @default: en
-    * which locale settings to use to translate the three
-    * standard button labels: OK, CONFIRM, CANCEL
-    */
-    locale: 'fr',
-    
-    /**
-    * @optional Boolean
-    * @default: true
-    * whether the dialog should be shown immediately
-    */
-    show: true,
-    
-    /**
-    * @optional Boolean
-    * @default: true
-    * whether the dialog should be have a backdrop or not
-    */
-    backdrop: true,
-    
-    /**
-    * @optional Boolean
-    * @default: true
-    * show a close button
-    */
-    closeButton: true,
-    
-    /**
-    * @optional Boolean
-    * @default: true
-    * animate the dialog in and out (not supported in < IE 10)
-    */
-    animate: true,
-    
-    /**
-    * @optional String
-    * @default: null
-    * an additional class to apply to the dialog wrapper
-    */
-    className: 'my-modal'
-    
-});
    -
    -
    -
    -

    setLocale()

    -
    - 
    bootbox.setLocale(String name);
    -

    - Allows the user to select a locale rather than using setDefaults('locale', ...). -

    -

    - The locale settings are used to translate the three standard button labels: OK, CONFIRM, CANCEL -

    -

    - Default: en -

    -
    -
    -
    -

    addLocale()

    -
    - 
    bootbox.addLocale(String name, object values);
    -

    - Allows the user to add a custom translation for each of the built-in command buttons. The values - object must be in this format: -

    - 
    {
-    OK : '',
-    CANCEL : '',
-    CONFIRM : ''
-}
    -
    -
    -
    -

    removeLocale()

    -
    - 
    bootbox.removeLocale(String name);
    -

    - Allows the user to remove a locale from the available locale settings. -

    -
    -
    -
    -

    locales()

    -
    - 
    bootbox.locales([String name]);
    -

    - Allows the user to get a locale object from the available locale settings. If name is null or empty, - all locales will be returned. -

    -
    -
    -
    -

    hideAll()

    -
    - 
    bootbox.hideAll();
    -

    - Hide all currently active Bootbox dialogs. Individual dialogs can be closed as per normal Bootstrap dialogs: -

    - 
    dialog.modal('hide');
    -
    -
    -
    -
    - -
    - -
    -
    -

    Known Limitations

    -
    -
    -

    - Using Bootbox has some caveats, as noted below. -

    -
    -
    -

    - - Dialog code does not block code execution -

    -
    -

    - All Bootstrap modals (and therefore Bootbox modals), unlike native alerts, confirms, or prompts, - are - asynchronous; meaning, - the events which Bootstrap generates are non-blocking events. - - Because of this limitation, code that should not be evaluated until a user has dismissed your dialog - must be called within the callback function of the dialog. - -

    -
    -
    - -
    -

    - - Multiple open modals are not supported -

    -
    -

    - This is a limitation of the Bootstrap modal plugin, as noted in the - official Bootstrap documentation. - While it is functionally possible to trigger multiple modals, custom CSS and/or JavaScript - code is required for each layer of modal to display properly. -

    -
    -
    - -
    -

    - - Prompt values are not sanitized -

    -
    -

    - The value(s) returned by a Bootbox prompt are not sanitized in any way. -

    -
    -
    - -
    -

    - - Content strings are not sanitized -

    -
    -

    - You can use either plain text or HTML for pretty much any Bootbox option which sets a display aspect of - the rendered modal, such as the title, message, and button labels. Bootbox does not sanitize any of - these values. Since we use jQuery's .html() function to build - the dialog, this is a possible XSS vector. It is your responsibility to sanitize your content. -

    + +
    +

    + Each of the available button options can be overridden to use custom content + (text or HTML ) + and CSS styles. For example: +

    + 
    bootbox.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) {
+                            // ...
+                            }
+                            });
    +

    + You cannot override the callbacks for the alert, confirm, and prompt dialog's + buttons. +

    + + +
    swapButtonOrder
    +
    +

    + Type: + Boolean +

    +

    + Default: false +

    +

    + Flips the order in which the buttons are rendered, from cancel/confirm to confirm/cancel. +

    +
    + +
    centerVertical
    +
    +

    + Type: + Boolean +

    +

    + Default: false +

    +

    + If true, the modal-dialog-centered + class will be added to the dialog wrapper. +

    +

    + Requires Bootstrap 4.1.0 or newer. +

    +
    + +
    scrollable
    +
    +

    + Type: + Boolean +

    +

    + Default: false +

    +

    + If true, the modal-dialog-scrollable + class will be added to the dialog wrapper. Enable this option to have the content of long + modals automatically scroll. +

    +

    + Requires Bootstrap 4.3.0 or newer. +

    +
    + +
    +
    + +
    + +
    +
    +

    + Available Locales +

    +
    +

    - We heartily recommend reviewing the OWASP Guidelines for preventing XSS. - For library recommendations, skip to - Rule 6 - Sanitize HTML Markup with a Library Designed for the Job. + Locales are used to provide a translation for each of the built-in command buttons (OK, CANCEL, + and CONFIRM).

    -
    - - - -
    +
    +

    Locales Index

    +
    +

    + The following locales are available (see the table below). You can find each of these locales + rendered on the + Examples page. +

    +
    + + + + + + + + - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    KeyName
    arArabic
    azAzerbaijani
    bg-BGBulgarian
    csCzech
    daDanish
    deGerman
    elGreek
    enEnglish
    esSpanish / Español
    etEstonian
    euBasque
    faFarsi / Persian
    fiFinnish
    frFrench / Français
    heHebrew
    hrCroatian
    huHungarian
    idIndonesian
    itItalian
    jaJapanese
    kaGeorgian
    koKorean
    ltLithuanian
    lvLatvian
    nlDutch
    noNorwegian
    plPolish
    ptPortuguese
    pt-BRPortuguese - Brasil
    ruRussian
    skSlovak
    slSlovenian
    sqAlbanian
    svSwedish
    swSwahili
    taTamil
    thThai
    trTurkish
    ukUkrainian
    zh-CNChinese (People's Republic of China)
    zh-TWChinese (Taiwan / Republic of China)
    - -
    -
    - - - - - +
    + + + + + + +
    + + + + + + + + + + + + + diff --git a/examples.html b/examples.html index 6e8ffdb6..805b176d 100644 --- a/examples.html +++ b/examples.html @@ -1,1037 +1,1122 @@ + - - - - - + + + + + + + + + + + + Examples — Bootbox.js — alert, confirm, prompt, and flexible dialogs for the Bootstrap framework + - - - - - - Examples — Bootbox.js — alert, confirm, prompt, and flexible dialogs for the Bootstrap framework - - - - - - - + + + + + + + + - - + -
    - -
    -
    -
    -
    -
    -

    Examples

    -

    - The examples below attempt to demonstrate the myriad ways in which you can use Bootbox. -

    -

    - Have an example you'd like to add? Open a new issue, or - add a pull-request with your example added to this page. -

    -
    -
    -
    -

    - Alert -

    -

    - - Documentation - - - - -

    -
    -
    -
    -
    -
    -
    Basic usage
    -
    -

    - -

    - 
    bootbox.alert('This is the default alert!');
    -
    -
    Basic usage, with callback
    -
    -

    - -

    - 
    bootbox.alert('This is an alert with a callback!', function() { 
-    console.log('This was logged in the callback!'); 
-});
    -
    -
    Basic usage, using HTML element, with callback
    -
    -

    - -

    - 
    let template = $('#alert-message-template');
-                            
-bootbox.alert(template, function () {
-    console.log('This was logged in the callback!');
-});
    -
    -
    Basic usage, using options object
    -
    -

    - -

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

    -

    - -

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

    - Requires Bootstrap 3.1.0 or newer. -

    -
    -
    Large dialog
    -
    -

    - Also applies to: Confirm, Prompt, Custom -

    -

    - -

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

    - Requires Bootstrap 3.1.0 or newer. -

    -
    -
    Extra-large dialog
    -
    -

    - Also applies to: Confirm, Prompt, Custom -

    -

    - -

    - 
    bootbox.alert({
-    message: 'This is the extra-large alert!',
-    size: 'extra-large'
-});
    -

    - Requires Bootstrap 4.2.0 or newer. -

    -
    -
    - Custom CSS class (using Animate.css) -
    -
    -

    - Also applies to: Confirm, Prompt, Custom -

    -

    - -

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

    - Also applies to: Confirm, Prompt, Custom -

    -

    - -

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

    - Also applies to: Confirm, Prompt, Custom -

    -

    - -

    - 
    bootbox.alert({
-    message: 'This alert uses the Arabic locale!',
-    locale: 'ar'
-});
    -
    -
    -
    -
    -
    -
    +
    +
    +
    +
    +
    +

    Examples

    +

    + The examples below attempt to demonstrate the myriad ways in which you can use Bootbox. +

    +

    + Have an example you'd like to add? Open a new + issue, or + add a pull-request with your example added to + this page. +

    +
    +
    +
    +

    + Alert +

    +

    + + Documentation + + + + +

    +
    +
    +
    +
    +
    +
    Basic usage
    +
    +

    + +

    + 
    bootbox.alert('This is the default
+                                alert!');
    +
    +
    Basic usage, with callback
    +
    +

    + +

    + 
    bootbox.alert('This is an alert with a
+                                callback!', function() {
+                                console.log('This was logged in the callback!');
+                                });
    +
    +
    Basic usage, using HTML element, with + callback
    +
    +

    + +

    + 
    let template = $('#alert-message-template');
 
-
    
+                                bootbox.alert(template, function () {
+                                console.log('This was logged in the callback!');
+                                });
    +
    +
    Basic usage, using options object
    +
    +

    + +

    + 
    bootbox.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 +

    +

    + +

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

    + Requires Bootstrap 3.1.0 or newer. +

    +
    +
    Large dialog
    +
    +

    + Also applies to: Confirm, Prompt, Custom +

    +

    + +

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

    + Requires Bootstrap 3.1.0 or newer. +

    +
    +
    Extra-large dialog
    +
    +

    + Also applies to: Confirm, Prompt, Custom +

    +

    + +

    + 
    bootbox.alert({
+                                message: 'This is the extra-large alert!',
+                                size: 'extra-large'
+                                });
    +

    + Requires Bootstrap 4.2.0 or newer. +

    +
    +
    + Custom CSS class (using Animate.css) +
    +
    +

    + Also applies to: Confirm, Prompt, Custom +

    +

    + +

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

    + Also applies to: Confirm, Prompt, Custom +

    +

    + +

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

    + Also applies to: Confirm, Prompt, Custom +

    +

    + +

    + 
    bootbox.alert({
+                                message: 'This alert uses the Arabic locale!',
+                                locale: 'ar'
+                                });
    +
    +
    +
    +
    +
    +
    -
    -
    -

    - Confirm -

    -

    - - Documentation - - - - -

    -
    -
    -
    -
    -
    -
    Basic usage
    -
    -

    - -

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

    -

    - -

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

    -

    - -

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

    -
    - - -
    -

    - -

    - 
    let locale = $('#choose-locale').val();
-    
-bootbox.confirm({
-    message: 'This confirm uses the selected locale. Were the labels what you expected?',
-    locale: locale,
-    callback: function (result) {
-        console.log('This was logged in the callback: ' + result);
-    }
-});
    -
    -
    -
    -
    -
    -
    +
    -
    +
    +
    +

    + Confirm +

    +

    + + Documentation + + + + +

    +
    +
    +
    +
    +
    +
    Basic usage
    +
    +

    + +

    + 
    bootbox.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 +

    +

    + +

    + 
    bootbox.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 +

    +

    + +

    + 
    bootbox.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 +

    +
    + + +
    +

    + +

    + 
    let locale = $('#choose-locale').val();
 
-    
    
-    
    
-        
    
-            Prompt
-        
    
-        
    
-            
-                Documentation
-            
-            
-                
-            
-        
    
-    
    
-    
    
-        
    
-            
    
-                
    
-                    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
    
-                    
    
-                        
    
-                            
-                        
    
-                        
    bootbox.prompt('This is the default prompt!', function(result) { 
-    console.log(result); 
-});
    
-                        
    
-                            
-                            If you want to style the input, you can target the .bootbox-input-text class.
-                        
    
-                    
    
-                    
    Vertically Centered
    
-                    
    
-                        
    
-                            
-                        
    
-                        
    bootbox.prompt({
-    title: 'This is a prompt, vertically centered!', 
-    centerVertical: true,
-    callback: function(result) { 
-        console.log(result); 
-    }
-});
    
-                    
    
-                    
    With a custom locale
    
-                    
    
-                        
    
-                            
-                        
    
-                        
    let locale = {
-    OK: 'I Suppose',
-    CONFIRM: 'Go Ahead',
-    CANCEL: 'Maybe Not'
-};
+                                bootbox.confirm({
+                                message: 'This confirm uses the selected locale. Were the labels what you expected?',
+                                locale: locale,
+                                callback: function (result) {
+                                console.log('This was logged in the callback: ' + result);
+                                }
+                                });
    
+                          
    
+                        
    
+                      
    
+                    
    
+                  
    
+                
    
 
-bootbox.addLocale('custom', locale);
+                
    
 
-bootbox.prompt({ 
-    title: 'This is a prompt with a custom locale! What do you think?', 
-    locale: 'custom',
-    callback: function (result) {
-        console.log('This was logged in the callback: ' + result);
-    }
-});
    -
    -
    Prompt with checkbox
    -
    -

    - -

    - 
    bootbox.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 .bootbox-checkbox-list. - If you want to style the individual checkbox inputs, you can target the .bootbox-input-checkbox class. -

    -
    -
    Prompt with radio buttons and a message value
    -
    -

    - -

    - 
    bootbox.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 .bootbox-radiobutton-list. - If you want to style the individual radio inputs, you can target the .bootbox-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: https://caniuse.com/#feat=input-datetime -

    -

    - -

    - 
    bootbox.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 .bootbox-input-date class. -

    -
    -
    - Prompt with email -
    -
    -

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

    -

    - -

    - 
    bootbox.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 .bootbox-input-email class. -

    -
    -
    - Prompt with number -
    -
    -

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

    -

    - -

    - 
    bootbox.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 .bootbox-input-number class. -

    -
    -
    Prompt with password
    -
    -

    - -

    - 
    bootbox.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 .bootbox-input-password class. -

    -
    -
    Prompt with select
    -
    -

    - -

    - 
    bootbox.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 .bootbox-input-select class. -

    -
    -
    Prompt with select & multiple
    -
    -

    - -

    - 
    bootbox.prompt({
-    title: 'This is a prompt with a multi-select!',
-    inputType: 'select',
-    multiple: true,
-    value: ['1','3'],
-    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 .bootbox-input-select class. -

    -
    -
    Prompt with textarea
    -
    -

    - -

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

    + Prompt +

    +

    + + Documentation + + + + +

    +
    +
    +
    +

    - - If you want to style the textarea, you can target the .bootbox-input-textarea class. + 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.

    -
    -
    - Prompt with time -
    -
    -

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

    -

    - -

    - 
    bootbox.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 .bootbox-input-time class. -

    -
    -
    - Prompt with range -
    -
    -

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

    -

    - -

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

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

    -
    -
    -
    -
    -
    -
    +
    +
    Basic usage
    +
    +

    + +

    + 
    bootbox.prompt('This is the default prompt!',
+                                function(result) {
+                                console.log(result);
+                                });
    +

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

    +
    +
    Vertically Centered
    +
    +

    + +

    + 
    bootbox.prompt({
+                                title: 'This is a prompt, vertically centered!',
+                                centerVertical: true,
+                                callback: function(result) {
+                                console.log(result);
+                                }
+                                });
    +
    +
    With a custom locale
    +
    +

    + +

    + 
    let locale = {
+                                OK: 'I Suppose',
+                                CONFIRM: 'Go Ahead',
+                                CANCEL: 'Maybe Not'
+                                };
 
-
    
+                                bootbox.addLocale('custom', locale);
 
-    
    
-    
    
-        
    
-            Custom Dialogs
-        
    
-        
    
-            
-                Documentation
-            
-            
-                
-            
-        
     
-    
    
-    
    
-        
    
-            
    
-                
    
-                    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
    
-                    
    
-                        
    
-                            
-                        
    
-                        
    let dialog = bootbox.dialog({
-    message: '<p class="text-center mb-0"><i class="fas fa-spin fa-cog"></i> Please wait while we do something...</p>',
-    closeButton: false
-});
+                                bootbox.prompt({
+                                title: 'This is a prompt with a custom locale! What do you think?',
+                                locale: 'custom',
+                                callback: function (result) {
+                                console.log('This was logged in the callback: ' + result);
+                                }
+                                });
    
+                          
    
+                          
    Prompt with checkbox
    
+                          
    
+                            
    
+                              
+                            
    
+                            
    bootbox.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 .bootbox-checkbox-list.
+                              If you want to style the individual checkbox inputs, you can target the
+                              .bootbox-input-checkbox class.
+                            
    
+                          
    
+                          
    Prompt with radio buttons and a
+                            message value
    
+                          
    
+                            
    
+                              
+                            
    
+                            
    bootbox.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
+                              .bootbox-radiobutton-list.
+                              If you want to style the individual radio inputs, you can target the
+                              .bootbox-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: https://caniuse.com/#feat=input-datetime
+                            
    
+                            
    
+                              
+                            
    
+                            
    bootbox.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 .bootbox-input-date class.
+                            
    
+                          
    
+                          
    
+                            Prompt with email
+                          
    
+                          
    
+                            
    
+                              Requires browser support: https://caniuse.com/#feat=email
+                            
    
+                            
    
+                              
+                            
    
+                            
    bootbox.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 .bootbox-input-email
+                              class.
+                            
    
+                          
    
+                          
    
+                            Prompt with number
+                          
    
+                          
    
+                            
    
+                              Requires browser support: https://caniuse.com/#feat=input-number
+                            
    
+                            
    
+                              
+                            
    
+                            
    bootbox.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 .bootbox-input-number
+                              class.
+                            
    
+                          
    
+                          
    Prompt with password
    
+                          
    
+                            
    
+                              
+                            
    
+                            
    bootbox.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 .bootbox-input-password
+                              class.
+                            
    
+                          
    
+                          
    Prompt with select
    
+                          
    
+                            
    
+                              
+                            
    
+                            
    bootbox.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 .bootbox-input-select
+                              class.
+                            
    
+                          
    
+                          
    Prompt with select & multiple
+                          
    
+                          
    
+                            
    
+                              
+                            
    
+                            
    bootbox.prompt({
+                                title: 'This is a prompt with a multi-select!',
+                                inputType: 'select',
+                                multiple: true,
+                                value: ['1','3'],
+                                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 .bootbox-input-select
+                              class.
+                            
    
+                          
    
+                          
    Prompt with textarea
    
+                          
    
+                            
    
+                              
+                            
    
+                            
    bootbox.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 .bootbox-input-textarea
+                              class.
+                            
    
+                          
    
+                          
    
+                            Prompt with time
+                          
    
+                          
    
+                            
    
+                              Requires browser support: https://caniuse.com/#feat=input-datetime
+                            
    
+                            
    
+                              
+                            
    
+                            
    bootbox.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 .bootbox-input-time class.
+                            
    
+                          
    
+                          
    
+                            Prompt with range
+                          
    
+                          
    
+                            
    
+                              Requires browser support: https://caniuse.com/#feat=input-range
+                            
    
+                            
    
+                              
+                            
    
+                            
    bootbox.prompt({
+                                title: 'This is a prompt with a range input!',
+                                inputType: 'range',
+                                min: 0,
+                                max: 100,
+                                step: 5,
+                                value: 35,
+                                callback: function (result) {
+                                console.log('This was logged in the callback: ' + result);
+                                }
+                                });
    
+                            
    
+                              
+                              If you want to style the input, you can target the .bootbox-input-range
+                              class.
+                            
    
+                          
    
+                        
    
+                      
    
+                    
    
+                  
    
+                
    
 
-// do something in the background
-dialog.modal('hide');
    -
    -
    - Custom dialog, using init -
    -
    -

    - Also applies to: Alert, Confirm, Prompt -

    -

    - -

    - 
    let dialog = bootbox.dialog({
-    title: 'A custom dialog with init',
-    message: '<p><i class="fas fa-spin fa-spinner"></i> Loading...</p>'
-});
+                
    
 
-dialog.init(function() {
-    setTimeout(function() {
-        dialog.find('.bootbox-body').html('I was loaded after the dialog was shown!');
-    }, 3000);
-});
    -
    -
    - Custom dialog, with buttons and callbacks -
    -
    +
    +
    +

    + Custom Dialogs +

    +
    + + Documentation + + + + +
    +
    +
    +
    +

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

    - 
    let dialog = bootbox.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(){
-                console.log('Custom cancel clicked');
-            }
-        },
-        noclose: {
-            label: "I don't close the modal!",
-            className: 'btn-warning',
-            callback: function() {
-                console.log('Custom button clicked');
-                return false;
-            }
-        },
-        ok: {
-            label: "I'm an OK button!",
-            className: 'btn-info',
-            callback: function() {
-                console.log('Custom OK clicked');
-            }
-        }
-    }
-});
    -
    -
    +
    +
    Custom dialog as "loading" overlay
    +
    +

    + +

    + 
    let dialog = bootbox.dialog({
+                                message: '<p class="text-center mb-0"><i class="fas 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 +

    +

    + +

    + 
    let dialog = bootbox.dialog({
+                                title: 'A custom dialog with init',
+                                message: '<p><i class="fas fa-spin fa-spinner"></i>
+                                Loading...</p>'
+                                });
+
+                                dialog.init(function() {
+                                setTimeout(function() {
+                                dialog.find('.bootbox-body').html('I was loaded after the dialog was shown!');
+                                }, 3000);
+                                });
    +
    +
    + Custom dialog, with buttons and callbacks +
    +
    +

    + +

    + 
    let dialog = bootbox.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(){
+                                console.log('Custom cancel clicked');
+                                }
+                                },
+                                noclose: {
+                                label: "I don't close the modal!",
+                                className: 'btn-warning',
+                                callback: function() {
+                                console.log('Custom button clicked');
+                                return false;
+                                }
+                                },
+                                ok: {
+                                label: "I'm an OK button!",
+                                className: 'btn-info',
+                                callback: function() {
+                                console.log('Custom OK clicked');
+                                }
+                                }
+                                }
+                                });
    +
    +
    +
    +
    +
    +
    + + +
    + +
    +
    Your message here…
    +
    +
    - - + + - - - -
    - - - - - - + +
    + +
  • + + + Documentation + +
    + +
    + Dialogs +
    + +
    + Configuration +
    + +
    +
    • +
  • + + + FAQ / Issues + +
    • + + + - - - - - - - - - - - - - - + +
    + + + + + + +
    + + + + + + + + + + + + + + - + diff --git a/faq.html b/faq.html index 39aa0f8c..ceec76c0 100644 --- a/faq.html +++ b/faq.html @@ -1,568 +1,628 @@ + - - - - - - - - - - - - Frequently Asked Questions — Bootbox.js — alert, confirm, prompt, and flexible dialogs for the Bootstrap framework - - - - - - - - + + + + + + + + + + + + Frequently Asked Questions — Bootbox.js — alert, confirm, prompt, and flexible dialogs for the + Bootstrap framework + + + + + + + + + -
    - + +
    +
    +
    +
    +
    +

    FAQ / Troubleshooting

    +

    + Bootbox.js is designed to be relatively easy to use, but there are some known issues and frequently + asked questions, as noted here. +

    +
    +
    +
    +

    + Q1: Native dialogs block the execution thread. Why doesn't Bootbox? +

    +
    +
    +

    + A: The simplest answer is: because Bootstrap + modals don't. +

    +

    + Bootbox is primarily an engine for generating markup on which Bootstrap's modal() + function can be called. Keep this is mind: Bootstrap + modals are really just positioned <div> elements. +

    +

    + Additionally, the modal() function is an asynchronous function, since JavaScript + didn't really provide wait until this thing is done + functionality in versions prior to ES7 (with async/await). Since Bootstrap 4 is still offering + some support for Internet Explorer + (which only supports ES6 and lower), modal() doesn't use async/await (nor does + Bootbox). +

    +

    + There is an experimental element, <dialog> (MDN), + which (in theory) will be able to thread-block; it's basically a standardized version of + an interactive modal element which can be styled. + Browser support isn't really where it needs to be in order to make the switch, so for now, + remember to use callbacks with your modals. +

    +
    +
    + +
    + +
    +
    +

    + Q2: How do I keep my page from submitting when I use + bootbox.confirm()? +

    +
    +
    +

    + A: See Native dialogs + block the execution thread. Why doesn't Bootbox? +

    +

    + To reiterate, Bootbox modals are just positioned <div> elements. The modals are + shown and hidden using asynchronous JavaScript functions, so + (unlike the native confirm() function) the thread of your code is not blocked when you call + bootbox.confirm(). To get around this, + Bootbox uses the callback pattern with our alert, confirm, and prompt functions. To respond to a + user's input, you can either define an + inline callback function, like so… +

    + 
    bootbox.confirm({
+                        message: "Are you sure?",
+                        callback: function(result){
+                        /* result = true if OK clicked, false otherwise */
+                        }
+                        });
    +

    + …or pass a reference to an external function: +

    + 
    bootbox.confirm({
+                        message: "Are you sure?",
+                        callback: handleConfirm
+                        });
+
+                        function handleConfirm(result){
+                        /* result = true if OK clicked, false otherwise */
+                        }
    +

    + Any process which depends on your user's response must be placed in the callback. If you're + handling something like the onSubmit + event of a <form>, you'll need to cancel the event in order to prevent the + event from proceeding: +

    + 
    let form = $('form');
+                        form.on('submit', function(e) {
+                        bootbox.confirm({
+                        message: "Are you sure?",
+                        callback: handleConfirm
+                        });
+
+                        // Or use e.preventDefault();
+                        return false; // prevents form submission
+                        });
+
+                        function handleConfirm(result){
+                        /* result = true if OK clicked, false otherwise
+                        }
    +

    + The same advice applies to bootbox.alert() and bootbox.prompt(). +

    +
    +
    + +
    + +
    +
    +

    + Q3: How do I require a non-empty value when I use + bootbox.prompt()? +

    +
    +
    +

    + A: To require a value to be entered / selected, set + the required + option to true. This will tell Bootbox to add the required property to + the generated form control, + and to trigger the browser's built-in validation when the dialog is submitted. +

    +
    + 
    bootbox.prompt({
+                          required: true,
+                          title: 'What is your name?',
+                          callback: function(result){
+                          /* result = String containing user input if OK clicked or null if close button clicked */
+                          }
+                          });
    +
    +
    Example bb.3
    +
    +
    +
    +
    What is your name?
    + +
    +
    +
    - +
    +
    +
    + + +
    +
    -
    - - -
    +
    -
    - -
    -
    - - -
    - -
    -
    -

    - Q4: I don't see my native language as a locale option. Why not? How do I add it? -

    -
    -
    -

    - A: Most localizations have been submitted by the community. If you don't see the locale - you're looking for, then it likely hasn't been submitted yet. -

    -

    - To add a new locale: -

    -
      -
    1. Fork the Bootbox repository.
      2. -
    2. Navigate to the /locales/ directory.
      3. -
    3. Within the /locales/ directory, create a new JavaScript file named with the IANA code for your language (e.g. 'en-US', 'pt-BR').
      4. -
    4. - Copy the template, below, into your new file. Values denoted with brackets (i.e. {{IANA code}}) represent the values you will fill - in for this locale. -
      5. -
    - -
    // locale : {{name of locale / language}}
-// author : {{your name (optional)}}
-bootbox.addLocale('{{IANA code}}', {
-  OK      : '{{OK text}}',
-  CANCEL  : '{{Cancel text}}',
-  CONFIRM : '{{Confirm text}}'
-});
    - -

    - Add a unit test for your new locale. Locales without tests are rarely pulled in. To add your test: -

    -
      -
    1. Navigate to the /tests/ directory.
      2. -
    2. Within the /tests/ directory, locate the JavaScript file named locales.test.js.
      3. -
    3. - Just before the closing });, copy the following template, inserting the correct values for your locale: -
      4. -
    - -
    describe('{{locale name}}', function() {
-  beforeEach(function() {
-    return this.setLocale('{{IANA code}}');
-  });
-  it('shows the correct OK translation', function() {
-    return expect(this.labels.ok).to.equal('{{OK text}}');
-  });
-  it('shows the correct CANCEL translation', function() {
-    return expect(this.labels.cancel).to.equal('{{Cancel text}}');
-  });
-  return it('shows the correct CONFIRM translation', function() {
-    return expect(this.labels.confirm).to.equal('{{Confirm text}}');
-  });
-});
    - -

    - Run grunt. This will regenerate the bootbox.locales.js and bootbox.all.js files and run the test suite. If all tests pass, - submit a pull-request; please include a meaningful commit message. -

    -
    -
    - -
    - -
    -
    -

    - Q5: When I use Bootbox, the header's all messed up. What gives? -

    -
    -
    -

    - A: Bootbox 6 is intended to work with any currently-supported version of Bootstrap — meaning you can use it with both - Bootstrap 4.x and Bootstrap 5.x. If you're seeing something similar to this… -

    -
    - 
    bootbox.alert({ 
-    title: 'My title',
-    message: "Your message here…" 
-});
    -
    -
    Example bb.4
    -
    -
    -
    - -

    My title

    -
    -
    -

    Your message here…

    -
    -
    - -
    +
    + + +
    + +
    +
    +

    + Q4: I don't see my native language as a locale option. Why not? How + do I add it? +

    +
    +
    +

    + A: Most localizations have been submitted by the + community. If you don't see the locale + you're looking for, then it likely hasn't been submitted yet. +

    +

    + To add a new locale: +

    +
      +
    1. Fork the Bootbox repository.
      2. +
    2. Navigate to the /locales/ directory.
      3. +
    3. Within the /locales/ directory, create a new JavaScript file named with the + IANA code for your language (e.g. 'en-US', 'pt-BR').
      4. +
    4. + Copy the template, below, into your new file. Values denoted with brackets (i.e. {{IANA + code}}) represent the values you will fill + in for this locale. +
      5. +
    + + 
    // locale : {{name of locale / language}}
+                          // author : {{your name (optional)}}
+                          bootbox.addLocale('{{IANA code}}', {
+                          OK : '{{OK text}}',
+                          CANCEL : '{{Cancel text}}',
+                          CONFIRM : '{{Confirm text}}'
+                          });
    + +

    + Add a unit test for your new locale. Locales without tests are rarely pulled in. To add + your test: +

    +
      +
    1. Navigate to the /tests/ directory.
      2. +
    2. Within the /tests/ directory, locate the JavaScript file named + locales.test.js.
      3. +
    3. + Just before the closing });, copy the following template, inserting the correct + values for your locale: +
      4. +
    + + 
    describe('{{locale name}}', function() {
+                          beforeEach(function() {
+                          return this.setLocale('{{IANA code}}');
+                          });
+                          it('shows the correct OK translation', function() {
+                          return expect(this.labels.ok).to.equal('{{OK text}}');
+                          });
+                          it('shows the correct CANCEL translation', function() {
+                          return expect(this.labels.cancel).to.equal('{{Cancel text}}');
+                          });
+                          return it('shows the correct CONFIRM translation', function() {
+                          return expect(this.labels.confirm).to.equal('{{Confirm text}}');
+                          });
+                          });
    + +

    + Run grunt. This will regenerate the bootbox.locales.js and bootbox.all.js files and + run the test suite. If all tests pass, + submit a pull-request; please include a meaningful commit message. +

    -
    -
    -
    -

    - … then you're probably using Bootstrap 5 and Bootbox 5 or older. The markup structure and CSS rules for Bootstrap 5 are not - compatible with the markup used in Bootstrap 4 modals, which is what Bootbox 4 and 5 generate. At the moment, there are no plans to - update Bootbox 5, so please upgrade to Bootbox 6 if you are able. -

    -
    -
    - -
    - -
    -
    -

    - Q6: Help! My package manager is telling me that Bootbox is insecure! -

    -
    -
    -

    - A: That's… unfortunate. -

    -

    - We're aware of at least one notice (via a HackerOne issue) on the npm package. Here's the gist: we use jQuery's - .html() as part of the construction of our modals. Because - that process (in part) includes the values passed in via the title and message options, there's - a possible XSS vector there, as we do not sanitize the content you pass in for those options. That's how Bootbox has - always worked, and it's how we allow formatted messages in our dialogs, and is a key part of the custom dialog - function. -

    -

    - Sanitizing HTML properly is not a trivial enterprise. It's also out of scope for Bootbox. If you're using a UI framework, it probably - has a pretty good sanitizer tool built in. If not, there are a lot of existing libraries that you can pipeline into the - process of using Bootbox. -

    -

    - In summary: if you're using user-submitted content, sanitize that content before passing it to Bootbox. -

    -
    -
    +
    -
    -
    -
    - Documentation -
    -
    - - FAQs - +
    + +
    +
    +

    + Q5: When I use Bootbox, the header's all messed up. What gives? +

    +
    +
    +

    + A: Bootbox 6 is intended to work with any + currently-supported version of Bootstrap — meaning you can use it with both + Bootstrap 4.x and Bootstrap 5.x. If you're seeing something similar to this… +

    +
    + 
    bootbox.alert({
+                            title: 'My title',
+                            message: "Your message here…"
+                            });
    +
    +
    Example bb.4
    +
    +
    +
    + +

    My title

    +
    +
    +

    Your message here…

    +
    +
    + +
    +
    +
    +
    +
    +

    + … then you're probably using Bootstrap 5 and Bootbox 5 or older. The markup + structure and CSS rules for Bootstrap 5 are not + compatible with the markup used in Bootstrap 4 modals, which is what Bootbox 4 and 5 generate. + At the moment, there are no plans to + update Bootbox 5, so please upgrade to Bootbox 6 if you are able. +

    +
    +
    + +
    + +
    +
    +

    + Q6: Help! My package manager is telling me that Bootbox is insecure! +

    +
    +
    +

    + A: That's… unfortunate. +

    +

    + We're aware of at least one notice (via a HackerOne issue) on the npm package. Here's + the gist: we use jQuery's + .html() as part of the construction of + our modals. Because + that process (in part) includes the values passed in via the title and + message options, there's + a possible XSS vector there, as we do not sanitize the content you pass in for those + options. That's how Bootbox has + always worked, and it's how we allow formatted messages in our dialogs, and is a key part of the + custom dialog + function. +

    +

    + Sanitizing HTML properly is not a trivial enterprise. It's also out of scope for Bootbox. If + you're using a UI framework, it probably + has a pretty good sanitizer tool built in. If not, there are a lot of existing libraries that + you can pipeline into the + process of using Bootbox. +

    +

    + In summary: if you're using user-submitted content, sanitize that content before passing it + to Bootbox. +

    +
    +
    + + +
    + +
    +
    +
    + + -
    - - - + + +
    + + + + + + +
    + + + + + + + + + + + + + diff --git a/getting-started.html b/getting-started.html index 22772c1c..d2b4ba4d 100644 --- a/getting-started.html +++ b/getting-started.html @@ -1,550 +1,587 @@ + - - - - - + + + + + + + + + + + + Getting Started — Bootbox.js — alert, confirm, prompt, and flexible dialogs for the Bootstrap + framework - - - - - - Getting Started — Bootbox.js — alert, confirm, prompt, and flexible dialogs for the Bootstrap framework - - - - - + + + + + + - - + -
    - -
    -
    -
    -
    -
    -

    Getting Started

    -

    - Bootbox.js is designed to make using Bootstrap modals easier! Follow the guide below, and you should be up and running in no time. -

    +
    +
    +
    +
    +
    +

    Getting Started

    +

    + Bootbox.js is designed to make using Bootstrap modals easier! Follow the guide below, and you should be + up and running in no time. +

    -
    -
    - -

    - Install -

    -
    -

    Bootbox can be added to your project in two easy ways:

    -
    -
    -

    npm

    - 
    npm i bootbox
    -
    -
    -

    cdnjs

    - 
    https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/6.0.0/bootbox.all.min.js
    -
    -
    -

    Or, serve the files yourself:

    -
    -
    - Direct download - (via GitHub — please do not link to these files directly) -
    - - - +
    +
    + +

    + Install +

    +
    +

    Bootbox can be added to your project in two easy ways:

    +
    +
    +

    npm

    + 
    npm i bootbox
    +
    +
    +

    cdnjs

    + 
    https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/6.0.0/bootbox.all.min.js
+
    +
    +
    +

    Or, serve the files yourself:

    +
    +
    + Direct download + (via GitHub — please do not + link to these files directly) +
    +
    + + - - - - + + + + - - + + - - + + - - -
    File Production: Development:
    - Core -

    - bootbox + default locale (en) only. -

    + Core +

    + bootbox + default locale (en) only. +

    		- - bootbox.js - + + bootbox.js + - - bootbox.min.js - + + bootbox.min.js +
    - Locales -

    - Contains only locales. -

    + Locales +

    + Contains only locales. +

    		- - bootbox.locales.js - + + bootbox.locales.js + - - bootbox.locales.min.js - + + bootbox.locales.min.js +
    - Bundled -

    - Includes bootbox + all locales. -

    + Bundled +

    + Includes bootbox + all locales. +

    		- - bootbox.all.js - + + bootbox.all.js + - - bootbox.all.min.js - + + bootbox.all.min.js +
    -
    -

    - Once you've downloaded Bootbox, skip down to the Usage Instructions for help setting up the library. -

    -
    -
    + + + +
    +

    + Once you've downloaded Bootbox, skip down to the Usage + Instructions for help setting up the library. +

    +
    + -
    +
    -
    -

    - Dependencies -

    -
    -

    - All versions of Bootbox stand on the shoulders of two great giants: Bootstrap and jQuery. - The exact version of Bootstrap depends on the version of Bootbox you're using. This has become slightly more complex than we'd like, but hopefully this handy - table will clear things up: -

    -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    Bootbox versionMin. Bootstrap versionMax. BootstrapMin. jQuerySupported?
    6.x.x Latest4.6.15.x.x3.5.x **
    5.x.x3.0.0 *4.x.x1.9.1
    4.x.x3.0.03.4.x1.9.1
    3.x.x2.2.22.3.21.8.3
    2.x.x2.0.02.0.41.7.1
    1.x.x1.3.01.4.01.7.1
    -

    - * Some options, like size, require Bootstrap 3.1.0 or higher. -

    -

    - ** npm package requires jQuery 3.5.1 or higher. If loading manually, any currently - supported version of jQuery will work. See https://releases.jquery.com/ -

    -
    -
    -

    - If you are using Bootstrap 4 or newer, you must also include Popper.js. Bootstrap - currently includes a bootstrap.bundle.min.js file in the pre-compiled version, if you prefer, which combines Popper.js with - the bootstrap.js source file. -

    -
    -
    +
    +

    + Dependencies +

    +
    +

    + All versions of Bootbox stand on the shoulders of two great giants: Bootstrap and jQuery. + The exact version of Bootstrap depends on the version of Bootbox you're using. This has become + slightly more complex than we'd like, but hopefully this handy + table will clear things up: +

    +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    Bootbox versionMin. Bootstrap versionMax. BootstrapMin. jQuerySupported?
    6.x.x Latest4.6.15.x.x3.5.x **
    5.x.x3.0.0 *4.x.x1.9.1
    4.x.x3.0.03.4.x1.9.1
    3.x.x2.2.22.3.21.8.3
    2.x.x2.0.02.0.41.7.1
    1.x.x1.3.01.4.01.7.1
    +

    + * Some options, like size, require Bootstrap + 3.1.0 or higher. +

    +

    + ** npm package requires jQuery 3.5.1 or higher. If loading + manually, any currently + supported version of jQuery will work. See https://releases.jquery.com/ +

    +
    +
    +

    + If you are using Bootstrap 4 or newer, you must also include Popper.js. Bootstrap + currently includes a bootstrap.bundle.min.js file in the pre-compiled version, if you prefer, + which combines Popper.js with + the bootstrap.js source file. +

    +
    +
    -
    +
    -
    -

    - Usage Instructions -

    -
    -

    - Once you've got your dependencies sorted, usage - is fairly straightforward and much like any other JavaScript library you've - ever used. The library creates a single global instance of a bootbox object: -

    - 
    <!DOCTYPE html>
-<html>
-<head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <title>My page</title>
+                
    
+                  
    
+                    Usage Instructions
+                  
    
+                  
    
+                    
    
+                      Once you've got your dependencies sorted, usage
+                      is fairly straightforward and much like any other JavaScript library you've
+                      ever used. The library creates a single global instance of a bootbox object:
+                    
    
+                    
    <!DOCTYPE html>
+                        <html>
+                        <head>
+                        <meta charset="utf-8">
+                        <meta name="viewport" content="width=device-width, initial-scale=1" />
+                        <title>My page</title>
 
-    <!-- CSS dependencies -->
-    <link rel="stylesheet" type="text/css" href="bootstrap.min.css">
-</head>
-<body>
-    <p>Content here. <a class="show-alert" href="#">Alert!</a></p>
+                        <!-- CSS dependencies -->
+                        <link rel="stylesheet" type="text/css" href="bootstrap.min.css">
+                        </head>
+                        <body>
+                        <p>Content here. <a class="show-alert" href="#">Alert!</a></p>
 
-    <!-- JS dependencies -->
-    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
-    <!-- Bootstrap 4+ dependency -->
-    <script src="popper.min.js"></script>
-    <script src="bootstrap.min.js"></script>
+                        <!-- JS dependencies -->
+                        <script
+                        src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
+                        <!-- Bootstrap 4+ dependency -->
+                        <script src="popper.min.js"></script>
+                        <script src="bootstrap.min.js"></script>
 
-    <!-- bootbox code -->
-    <script src="bootbox.all.min.js"></script>
-    <script>
-        $(document).on('click', '.show-alert', function(e) {
-            bootbox.alert('Hello world!', function() {
-                console.log('Alert Callback');
-            });
-        });
-    </script>
-</body>
-</html>
    
-            
    
-                
-                Note the order of the script references
-            
    
-            
    
-                Since Bootbox is a wrapper around Bootstrap's modal functionality, you need to include the libraries in order:
-            
    
-            
      
-                
    1. jQuery
      2. 
-                
    2. Popper.js
      3. 
-                
    3. Bootstrap
      4. 
-                
    4. Bootbox
      5. 
-            
    
-            
    
-                When you're up and running, check out some examples
-                or the documentation.
-            
    
-        
    
-    
    
+                        <!-- bootbox code -->
+                        <script src="bootbox.all.min.js"></script>
+                        <script>
+                        $(document).on('click', '.show-alert', function(e) {
+                        bootbox.alert('Hello world!', function() {
+                        console.log('Alert Callback');
+                        });
+                        });
+                        </script>
+                        </body>
+                        </html>
    +

    + + Note the order of the script references +

    +

    + Since Bootbox is a wrapper around Bootstrap's modal functionality, you need to include the + libraries in order: +

    +
      +
    1. jQuery
      2. +
    2. Popper.js
      3. +
    3. Bootstrap
      4. +
    4. Bootbox
      5. +
    +

    + When you're up and running, check out some examples + or the documentation. +

    +
    +
    -
    +
    +
    +
    + + -
    -
    - -
    +
    + +
    + + + + + + +
    + + + + + + + + + + + - + diff --git a/index.html b/index.html index f8a38030..9e264554 100644 --- a/index.html +++ b/index.html @@ -1,385 +1,413 @@ + - - - - - + + + + + + + + + + + + — Bootbox.js — alert, confirm, prompt, and flexible dialogs for the Bootstrap framework - - - - - - — Bootbox.js — alert, confirm, prompt, and flexible dialogs for the Bootstrap framework - - - - - + + + + + + - - + -
    - -
    -
    -
    -
    -
    -
    -
    -

    - Bootbox.js -

    -

    - Bootstrap modals made easy. -

    -

    - Bootbox.js is a small JavaScript library which allows you to create custom modal dialogs - using Bootstrap modals, without having to worry about - creating, managing, or removing any of the required DOM elements or JavaScript event handlers. -

    -

    - - npm i bootbox - - • - - cdnjs - -

    -
    -
    +
    +
    +
    +
    +
    +
    +
    +

    + Bootbox.js +

    +

    + Bootstrap modals made easy. +

    +

    + Bootbox.js is a small JavaScript library which allows you to create custom modal dialogs + using Bootstrap modals, without + having to worry about + creating, managing, or removing any of the required DOM elements or JavaScript event handlers. +

    +

    + + npm i bootbox + + • + + cdnjs + +

    +
    +
    -
    -
    -

    Flexible Bootstrap-style dialogs

    -
    -

    - Bootbox provides three functions, alert(), confirm(), and prompt(), whose aim is to - mimic their native JavaScript equivalents. Here's the simplest possible example: -

    - 
    bootbox.alert('Hello world!');
    - -
    -

    - Compare that to the code you'd have to write without Bootbox: -

    -
    - 
    <!-- set up the modal to start hidden and fade in and out -->
-<div id="myModal" class="modal fade">
-    <div class="modal-dialog">
-        <div class="modal-content">
-            <!-- dialog body -->
-            <div class="modal-body">
-                <button type="button" class="close" data-dismiss="modal">&times;</button>
-                Hello world!
-            </div>
-            <!-- dialog buttons -->
-            <div class="modal-footer"><button type="button" class="btn btn-primary">OK</button></div>
-        </div>
-    </div>
-</div>
-    
-<!-- sometime later, probably inside your on load event callback -->
-<script>
-    $('#myModal').on('show.bs.modal', function() {      // wire up the OK button to dismiss the modal when shown
-        $('#myModal .modal-footer .btn').on('click', function(e) {
-            console.log('button pressed');              // just as an example...
-            $('#myModal').modal('hide');                // dismiss the dialog
-        });
-    });
-        
-    $('#myModal').on('hide.bs.modal', function() {      // remove the event listeners when the dialog is dismissed
-        $('#myModal a.btn').off('click');
-    });
-            
-    $('#myModal').on('hidden.bs.modal', function() {    // remove the actual elements from the DOM when fully hidden
-        $('#myModal').remove();
-    });
-            
-    $('#myModal').modal({                               // wire up the actual modal functionality and show the dialog
-        'backdrop'  : 'static',
-        'keyboard'  : true,
-        'show'      : true                              // ensure the modal is shown immediately
-    });
-</script>
    -
    -

    Build Your Own Dialogs!

    -

    - Each Bootbox function calls a fourth public function, dialog(), - which you can use to create your own custom dialogs. See the Documentation - page for usage and to learn which options are available for each function. -

    -
    - -
    - -
    -

    Ready To Get Started?

    -

    - Head on over to the Getting Started page, where you'll find the information - you need to start using Bootbox, including the versions of Bootstrap we support and options for adding - Bootbox to your project. -

    -
    +
    +
    +

    Flexible Bootstrap-style dialogs

    +
    +

    + Bootbox provides three functions, alert(), confirm(), and + prompt(), whose aim is to + mimic their native JavaScript equivalents. Here's the simplest possible example: +

    + 
    bootbox.alert('Hello world!');
    + +
    +

    + Compare that to the code you'd have to write without Bootbox: +

    +
    + 
    <!-- set up the modal to start hidden and fade in
+                        and out -->
+                        <div id="myModal" class="modal fade">
+                        <div class="modal-dialog">
+                        <div class="modal-content">
+                        <!-- dialog body -->
+                        <div class="modal-body">
+                        <button type="button" class="close" data-dismiss="modal">&times;</button>
+                        Hello world!
+                        </div>
+                        <!-- dialog buttons -->
+                        <div class="modal-footer"><button type="button" class="btn
+                        btn-primary">OK</button></div>
+                        </div>
+                        </div>
+                        </div>
 
-    
    
-        
    
-            
    
-                
-                    Home
-                
-            
    
-            
    
-                Getting Started 
+                        <!-- sometime later, probably inside your on load event callback -->
+                        <script>
+                        $('#myModal').on('show.bs.modal', function() { // wire up the OK button to dismiss the modal
+                        when shown
+                        $('#myModal .modal-footer .btn').on('click', function(e) {
+                        console.log('button pressed'); // just as an example...
+                        $('#myModal').modal('hide'); // dismiss the dialog
+                        });
+                        });
+
+                        $('#myModal').on('hide.bs.modal', function() { // remove the event listeners when the dialog is
+                        dismissed
+                        $('#myModal a.btn').off('click');
+                        });
+
+                        $('#myModal').on('hidden.bs.modal', function() { // remove the actual elements from the DOM when
+                        fully hidden
+                        $('#myModal').remove();
+                        });
+
+                        $('#myModal').modal({ // wire up the actual modal functionality and show the dialog
+                        'backdrop' : 'static',
+                        'keyboard' : true,
+                        'show' : true // ensure the modal is shown immediately
+                        });
+                        </script>
    +
    +

    Build Your Own Dialogs!

    +

    + Each Bootbox function calls a fourth public function, dialog(), + which you can use to create your own custom dialogs. See the Documentation + page for usage and to learn which options are available for each function. +

    +
    + +
    + +
    +

    Ready To Get Started?

    +

    + Head on over to the Getting Started page, where you'll find the + information + you need to start using Bootbox, including the versions of Bootstrap we support and options for + adding + Bootbox to your project. +

    +
    + + +
    +
    +
    +
    +
    + + -
    -
    - -
    +
    + +
    + + + + + + +
    + + + + + + + + + + + - +