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.

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

For many more examples - simple and complex use-cases - check out the alert and notification demos for react.

Parameters

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

Returns: Promise

A promise which is resolved when the popup is closed.

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.

// Using callback function
mobiscroll.confirm({
    title: 'Use location service?',
    message: 'Help apps determine the 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 determine the 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.');
});

For many more examples - simple and complex use-cases - check out the alert and notification demos for react.

Parameters

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

Returns: Promise

A promise which is resolved when the popup is closed.

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.

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

For many more examples - simple and complex use-cases - check out the alert and notification demos for react.

Parameters

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

Returns: Promise

A promise which is resolved when the popup is closed.

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.

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

iOS Dark theme

Windows theme

Windows Dark theme

Material theme

Material Dark theme

Mobiscroll theme

Mobiscroll Dark theme

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.

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

For many more examples - simple and complex use-cases - check out the alert and notification demos for react.

Parameters

Returns: Promise

A promise which is resolved when the toast hides.

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.

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

For many more examples - simple and complex use-cases - check out the alert and notification demos for react.

Parameters

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

Returns: Promise

A promise which is resolved when the snackbar hides.

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.

<mobiscroll.Page theme="mobiscroll-dark">
    <mobiscroll.Note color="primary">This is a primary note</mobiscroll.Note>
    <mobiscroll.Note color="secondary">This is a secondary note</mobiscroll.Note>
    <mobiscroll.Note color="success">This is a success note</mobiscroll.Note>
    <mobiscroll.Note color="danger">This is a danger note</mobiscroll.Note>
    <mobiscroll.Note color="warning">This is a warning note</mobiscroll.Note>
    <mobiscroll.Note color="info">This is a info note</mobiscroll.Note>
    <mobiscroll.Note color="light">This is a light note</mobiscroll.Note>
    <mobiscroll.Note color="dark">This is a dark note</mobiscroll.Note>
</mobiscroll.Page>

For many more examples - simple and complex use-cases - check out the alert and notification demos for react.