---
title: "Javascript Forms Alert, confirm & prompt Example | Mobiscroll"
component: "Forms"
framework: "JavaScript"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/javascript/forms/alert-confirm-prompt"
---

# Alert, confirm & prompt - JavaScript Forms demo

Javascript alert, confirm and prompt dialogs for giving feedback to users and for quick & focused data entry. Plain JS api for usage everywhere.

- [Live demo](https://demo.mobiscroll.com/javascript/forms/alert-confirm-prompt)
- [View code on GitHub](https://github.com/acidb/mobiscroll-demos-javascript/tree/main/src/demos/form-components/forms/alert-confirm-prompt)
- This demo in other frameworks: [jQuery](https://demo.mobiscroll.com/jquery/forms/alert-confirm-prompt.md), [Angular](https://demo.mobiscroll.com/angular/forms/alert-confirm-prompt.md), [React](https://demo.mobiscroll.com/react/forms/alert-confirm-prompt.md), [Vue](https://demo.mobiscroll.com/vue/forms/alert-confirm-prompt.md)

## Description

Use the alert, confirm and prompt messages to pop a message box in the middle of the screen. Alert the user or collect feedback at the same time. These controls cannot be dismissed by pressing the overlay, which avoids closing it by mistake.

## What this demo shows

- This demo shows three common dialog types: Alert, Confirm, and Prompt.
- **Alert** Displays a title, message, and confirmation button.
- **Confirm** Presents separate actions with customizable button text.
- **Prompt** Collects user input directly within the dialog.
- **Input types** Configures the Prompt with different input types, including a password field.
- **Modal behavior** Opens each dialog as a modal overlay and prevents dismissal by clicking the overlay, keeping the required action in focus.

## Best for

- **Alerts and notifications** Presenting important information that users must acknowledge before continuing.
- **Action confirmation** Asking users to confirm or cancel a consequential action, such as deleting an item or submitting a change.
- **Short text input** Collecting a name, note, reference, or other brief value without navigating to a separate form.
- **Sensitive input** Requesting a password or similar concealed value within a focused dialog.
- **Required decisions** Keeping users focused when they must choose an action or provide input before returning to the underlying interface.

## Tutorial

### Alert

Alerts have a `title`, `message` and a confirmation button.

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

### Confirm

Besides a `title` and `message`, the confrim dialog supports a customizable `okText` and `cancelText`.

```js
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'
});
```

### Prompt

Adding to the `title` and `message`, the prompt provides a focused way of capturing user input. With the `inputType`, passwords can be entered and the `placeholder` provides a helper text.

```js
mobiscroll.prompt({
    title: 'Sign in to iTunes Store',
    message: 'Enter the Apple ID password for "hello@mobiscroll.com".',
    placeholder: 'Password',
    inputType: 'password'
});
```

## Code

### JS

```js
mobiscroll.setOptions({
  theme: 'ios',
  themeVariant: 'light'
});

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

document.getElementById('show-confirm').addEventListener('click', function () {
  mobiscroll.confirm({
    title: 'Use location service?',
    message: 'Help apps determine location. This means sending anonymous location data, even when no apps are running.',
    okText: 'Agree',
    cancelText: 'Disagree',
  });
});

document.getElementById('show-prompt').addEventListener('click', function () {
  mobiscroll.prompt({
    title: 'Sign in to iTunes Store',
    message: 'Enter the Apple ID password for "hello@mobiscroll.com".',
    placeholder: 'Password',
    inputType: 'password',
  });
});
```

### HTML

```html
<button mbsc-button id="show-alert">Alert</button>
<button mbsc-button id="show-confirm">Confirm</button>
<button mbsc-button id="show-prompt">Prompt</button>
```

## Implementation notes

- `title` and `message` are the common options shared by `Alert`, `Confirm`, and `Prompt`.
- `Confirm` adds `okText` and `cancelText` to relabel its two action buttons (defaults are generic Ok/Cancel text).
- `Prompt` adds `placeholder` (helper text shown in the empty input) and `inputType` (e.g. `'password'` to mask the entered value).
- Overlay-click dismissal is disabled by default on all three dialog types, so the required action stays in focus until an explicit button is pressed.
- Invocation differs by framework: JS/jQuery call the imperative functions `mobiscroll.alert({...})`, `mobiscroll.confirm({...})`, `mobiscroll.prompt({...})` directly from a click handler, and the dialog opens immediately; Angular injects the `Notifications` service (`constructor(public notify: Notifications) {}`) and calls `this.notify.alert({...})`, `this.notify.confirm({...})`, `this.notify.prompt({...})` the same way.
- React and Vue render the dialogs as declarative components instead - `<Alert>`, `<Confirm>`, `<Prompt>` in React and `<MbscAlert>`, `<MbscConfirm>`, `<MbscPrompt>` in Vue - each controlled by an `isOpen` boolean prop; a button's `onClick`/`@click` sets `isOpen` to `true`, and the dialog's `onClose`/`@close` callback sets it back to `false`.
- `Prompt`'s close callback receives the entered value as its argument (`null` if the dialog was cancelled), e.g. `closePrompt = (value: string | null) => {...}` in React.

## Run it in your project

1. If not signed up yet, or don't own a license, you can [start a free trial](https://mobiscroll.com/starttrial).

2. Clone the repository:

   ```
   git clone https://github.com/acidb/mobiscroll-demos-javascript.git
   ```

3. If not installed yet, install the Mobiscroll CLI from NPM:

   ```
   npm install -g @mobiscroll/cli
   ```

4. Config Mobiscroll - open a terminal window in the root directory and run:

   ```
   mobiscroll config javascript
   ```

5. Install dependencies - open a terminal window in the root directory and run:

   ```
   npm install
   ```

6. Run the project:

   ```
   npm run dev
   ```

On a trial, add `--trial` to the config command: `mobiscroll config javascript --trial`.

Running a demo locally requires a Mobiscroll trial or a license; setup is per framework at https://mobiscroll.com/docs/javascript/getting-started/installation

## Related demos

- Next: [Toast & snackbar](https://demo.mobiscroll.com/javascript/forms/notifications.md) - Javascript notification examples of toast and snackbar with or w/o action. With undo, retry or custom functionality.