General Date & Time pickers Event Calendar Form components Gesture enabled responsive list Numeric pickers Pickers & dropdowns Page layout & navigation Tools Accessibility

Alerts

Alerts are urgent interruptions that inform the user about a situation. May also collect information from the user. It appears on top of the app's content, and must be manually dismissed before resuming interaction with the app.

Alert

mobiscroll.alert(config)

Description

An alert dialog notifies or warns the user about something. It contains a single button which closes the alert.

Example
mobiscroll.alert({
    title: 'Cellular Data is Turned Off for "Safari"',
    message: 'You can turn on cellular data for this app in Settings.'
});

Parameters

The configuration object for the alert dialog can have the following properties:

Name Type Default value Description
message String undefined The message to present.
title String undefined (Optional) - Title for the dialog.
okText String 'OK' (Optional) - Text for the button which closes the dialog. If not specified, uses the okText of the language specified in the global settings.
display String 'bottom' (Optional) - Controls the positioning of the dialog. Possible options: 'bottom', 'center', 'top'.
callback Function undefined (Optional) - A function which executes when the dialog is dismissed.

Returns: Promise

A promise which is resolved when the popup is closed.

Promises can be used only in browsers supporting it. In browsers without Promise support the return value will be undefined. If you'd like to use the Promise syntax and also support older browsers (IE10, IE11, Android 4.1, 4.2, 4.3 stock browser), please use a polyfill, otherwise use the callback function from the config object.

Confirm

mobiscroll.confirm(config)

Description

A confirm dialog is used when it is required to confirm an action. It has two buttons, one of which confirms the action, and the other rejects it.

Example
// Using callback function
mobiscroll.confirm({
    title: 'Use location service?',
    message: 'Help apps determinde location. This means sending anonymous location data, even when no apps are running.',
    okText: 'Agree',
    cancelText: 'Disagree',
    callback: function (result) {
        console.log(result ? 'Agreed.' : 'Disagreed.');
    }
});

// Using promise
mobiscroll.confirm({
    title: 'Use location service?',
    message: 'Help apps determinde location. This means sending anonymous location data, even when no apps are running.',
    okText: 'Agree',
    cancelText: 'Disagree'
}).then(function (result) {
    console.log(result ? 'Agreed.' : 'Disagreed.');
});

Parameters

The configuration object for the confirm dialog can have the following properties:

Name Type Default Description
message String undefined The message to present.
title String undefined (Optional) - Title for the dialog.
okText String 'OK' (Optional) - Text for the button which confirms the dialog. If not specified, uses the okText of the language specified in the global settings.
cancelText String 'Cancel' (Optional) - Text for the button which cancels the dialog. If not specified, uses the cancelText of the language specified in the global settings.
display String 'bottom' (Optional) - Controls the positioning of the dialog. Possible options: 'bottom', 'center', 'top'.
callback Function undefined (Optional) - A function which executes when the dialog closes. It receives a boolean parameter which is true, if the alert was confirmed, otherwise false.

Returns: Promise

A promise which is resolved when the popup is closed.

Promises can be used only in browsers supporting it. In browsers without Promise support the return value will be undefined. If you'd like to use the Promise syntax and also support older browsers (IE10, IE11, Android 4.1, 4.2, 4.3 stock browser), please use a polyfill, otherwise use the callback function from the config object.

Prompt

mobiscroll.prompt(config)

Description

A prompt dialog is used when it is required to get some data from the user, e.g. a password confirmation. It has two buttons, one of which submits the entered data, the other one cancels the dialog.

Example
// Using callback function
mobiscroll.prompt({
    title: 'Sign in to iTunes Store',
    message: 'Enter the Apple ID password for "hello@mobiscroll.com".',
    placeholder: 'Password',
    inputType: 'password',
    callback: function (value) {
        console.log('The password is: ' + value);
    }
});

// Using promise
mobiscroll.prompt({
    title: 'Sign in to iTunes Store',
    message: 'Enter the Apple ID password for "hello@mobiscroll.com".',
    placeholder: 'Password',
    inputType: 'password'
}).then(function (value) {
    console.log('The password is: ' + value);
});

Parameters

The configuration object for the prompt dialog can have the following properties:

Name Type Default Description
message String undefined The message to present.
title String undefined (Optional) - Title for the dialog.
okText String 'OK' (Optional) - Text for the button which submits the entered value. If not specified, uses the okText of the language specified in the global settings.
cancelText String 'Cancel' (Optional) - Text for the button which cancels the dialog. If not specified, uses the cancelText of the language specified in the global settings.
placeholder String undefined (Optional) - Placeholder text for the displayed input.
label String undefined (Optional) - Label for the displayed input.
inputType String undefined (Optional) - Type of the displayed input..
value String undefined (Optional) - Initial value of the displayed input.
display String 'bottom' (Optional) - Controls the positioning of the dialog. Possible options: 'bottom', 'center', 'top'.
callback Function undefined (Optional) - A function which executes when the dialog closes. It receives a parameter which containes the entered value as string, or null, if nothing was entered.

Returns: Promise

A promise which is resolved when the popup is closed.

Promises can be used only in browsers supporting it. In browsers without Promise support the return value will be undefined. If you'd like to use the Promise syntax and also support older browsers (IE10, IE11, Android 4.1, 4.2, 4.3 stock browser), please use a polyfill, otherwise use the callback function from the config object.

Alert, Confirm and Prompt theming

Global variables

These variables are applied to all base themes: iOS, material, windows and mobiscroll.
They all come in pairs. One for the light and one for the dark variant in each theme.

Variable name Description
$mbsc-frame-background-light Sets the background color of the Alert, Confirm and Prompt
$mbsc-frame-background-dark
$mbsc-frame-text-light Sets the text color of the Alert, Confirm and Prompt
$mbsc-frame-text-dark
$mbsc-frame-accent-light Sets the accent color of the Alert, Confirm and Prompt
$mbsc-frame-accent-dark
$mbsc-frame-overlay-light Sets the color of the overlay
$mbsc-frame-overlay-dark

If you really want to get sophisticated or if a color doesn't look good on a specific theme and you want to overwrite it, you can fine tune all of the above variables individually for each theme. Below are the complete list of variables broken down to themes:

iOS theme

Variable name Default value Description
$mbsc-ios-frame-background
#ffffff
The Alert, Confirm and Prompt background color
$mbsc-ios-frame-text
#000000
The Alert, Confirm and Prompt text color
$mbsc-ios-frame-accent
#007bff
The Alert, Confirm and Prompt accent color
$mbsc-ios-frame-overlay
rgba(0, 0, 0, 0.2)
Sets the color of the overlay

iOS Dark theme

$mbsc-ios-dark-frame-background
#0f0f0f
The Alert, Confirm and Prompt background color
$mbsc-ios-dark-frame-text
#ffffff
The Alert, Confirm and Prompt text color
$mbsc-ios-dark-frame-accent
#ff8400
The Alert, Confirm and Prompt accent color
$mbsc-ios-dark-frame-overlay
rgba(255, 255, 255, .1)
Sets the color of the overlay
Indication on what the color variables affect

Windows theme

Variable name Default value Description
$mbsc-windows-frame-background
#1a1a1a
The Alert, Confirm and Prompt background color
$mbsc-windows-frame-text
#262626
The Alert, Confirm and Prompt text color
$mbsc-windows-frame-accent
#0078d7
The Alert, Confirm and Prompt accent color
$mbsc-windows-frame-overlay
rgba(0, 0, 0, .7)
Sets the color of the overlay

Windows Dark theme

Variable name Default value Description
$mbsc-windows-dark-frame-background
#191919
The Alert, Confirm and Prompt background color
$mbsc-windows-dark-frame-text
#ffffff
The Alert, Confirm and Prompt text color
$mbsc-windows-dark-frame-accent
#0078d7
The Alert, Confirm and Prompt accent color
$mbsc-windows-dark-frame-overlay
rgba(0, 0, 0, .7)
Sets the color of the overlay
Indication on what the color variables affect

Material theme

Variable name Default value Description
$mbsc-material-frame-background
#eeeeee
The Alert, Confirm and Prompt background color
$mbsc-material-frame-text
#5b5b5b
The Alert, Confirm and Prompt text color
$mbsc-material-frame-accent
#009688
The Alert, Confirm and Prompt accent color
$mbsc-material-frame-overlay
rgba(0, 0, 0, .6)
Sets the color of the overlay

Material Dark theme

Variable name Default value Description
$mbsc-material-dark-frame-background
#303030
The Alert, Confirm and Prompt background color
$mbsc-material-dark-frame-text
#c2c2c2
The Alert, Confirm and Prompt text color
$mbsc-material-dark-frame-accent
#81ccc4
The Alert, Confirm and Prompt accent color
$mbsc-material-dark-frame-overlay
rgba(0, 0, 0, .6)
Sets the color of the overlay
Indication on what the color variables affect

Mobiscroll theme

Variable name Default value Description
$mbsc-mobiscroll-frame-background
#f7f7f7
The Alert, Confirm and Prompt background color
$mbsc-mobiscroll-frame-text
#454545
The Alert, Confirm and Prompt text color
$mbsc-mobiscroll-frame-accent
#4eccc4
The Alert, Confirm and Prompt accent color
$mbsc-mobiscroll-frame-overlay
rgba(0, 0, 0, .7)
Sets the color of the overlay

Mobiscroll Dark theme

Variable name Default value Description
$mbsc-mobiscroll-dark-frame-background
#263238
The Alert, Confirm and Prompt background color
$mbsc-mobiscroll-dark-frame-text
#f7f7f7
The Alert, Confirm and Prompt text color
$mbsc-mobiscroll-dark-frame-accent
#4fccc4
The Alert, Confirm and Prompt accent color
$mbsc-mobiscroll-dark-frame-overlay
rgba(0, 0, 0, .7)
Sets the color of the overlay
Indication on what the color variables affect

Notifications

Toast

mobiscroll.toast(config)

Description

Toasts are simple text only notifications informing the user. They should be primarly used to display messages not necessarily related to a user action, such as background synchronization or similar. Toasts don't lock the app's main interface and are automatically dismissed after a while.

Example
mobiscroll.toast({
    message: '39 files synchronized successfully.'
});

Parameters

Name Type Default Description
message String undefined The message to present.
duration Number or Boolean 3000 (Optional) - Display time of the message in milliseconds. If false, the message will be persistent.
display String 'bottom' (Optional) - Controls the positioning of the dialog. Possible options: 'bottom', 'center', 'top'.
color String undefined (Optional) - Specifies the predefined background color of the toast, each serving its own semantic purpose. Possible values: 'primary', 'secondary', 'success', 'danger', 'warning', 'info'.
callback Function undefined (Optional) - A function which executes when the message hides.

Returns: Promise

A promise which is resolved when the toast hides.

Promises can be used only in browsers supporting it. In browsers without Promise support the return value will be undefined. If you'd like to use the Promise syntax and also support older browsers (IE10, IE11, Android 4.1, 4.2, 4.3 stock browser), please use a polyfill, otherwise use the callback function from the config object.

Snackbar

mobiscroll.snackbar(config)

Description

Snackbars provide brief feedback after an action through a message at the bottom of the screen. A snackbar may contain an action, such as "Undo" or "Retry". Snackbars don't lock the app's main interface and are automatically dismissed after a while.

Example
mobiscroll.snackbar({
    message: 'Connection timed out. Showing limited messages.',
    button: {
        text: 'Retry',
        action: function () {
            console.log('Retrying...');
        }
    }
});

Parameters

The configuration object for the snackbar can have the following properties:

Name Type Default Description
message String undefined The message to present.
duration Number or Boolean 3000 (Optional) - Display time of the message in milliseconds. If false, the message will be persistent.
button Object null (Optional) - Displays an action button on the snackbar. Properties:
  • text:String - Text of the button.
  • icon:String (Optional) - Specifies the icon of the button.
  • action:Function - A function which executes when the button is tapped.
display String 'bottom' (Optional) - Controls the positioning of the dialog. Possible options: 'bottom', 'center', 'top'.
color String undefined (Optional) - Specifies the predefined background color of the toast, each serving its own semantic purpose. Possible values: 'primary', 'secondary', 'success', 'danger', 'warning', 'info'.
callback Function undefined (Optional) - A function which executes when the message hides.

Returns: Promise

A promise which is resolved when the snackbar hides.

Promises can be used only in browsers supporting it. In browsers without Promise support the return value will be undefined. If you'd like to use the Promise syntax and also support older browsers (IE10, IE11, Android 4.1, 4.2, 4.3 stock browser), please use a polyfill, otherwise use the callback function from the config object.

Dismiss

To dismiss the currently displayed notification (toast or snackbar), use the mobiscroll.notification.dismiss function:

mobiscroll.notification.dismiss();

Notes

Provide inline feedback messages for typical user actions. The notes include several predefined colors, each serving its own semantic purpose.

For proper styling, use one of the eight required contextual classes (e.g. .mbsc-note-warning).

Predefined note styles
<div class="mbsc-note mbsc-note-primary">This is a primary note!</div>
<div class="mbsc-note mbsc-note-secondary ">This is a secondary note!</div>
<div class="mbsc-note mbsc-note-success ">This is a success note!</div>
<div class="mbsc-note mbsc-note-danger ">This is a danger note!</div>
<div class="mbsc-note mbsc-note-warning ">This is a warning note!</div>
<div class="mbsc-note mbsc-note-info ">This is a info  note!</div>
<div class="mbsc-note mbsc-note-light ">This is a light note!</div>
<div class="mbsc-note mbsc-note-dark ">This is a dark note!</div>