---
title: "Dialog System"
description: "The Jodit dialog system for building modal windows with title, content and footer, including ready-made Alert, Confirm and Prompt wrappers."
metadata:
  - name: keywords
    content: "jodit, dialog, modal, alert, confirm, prompt, popup"
---
# Dialog system

The Jodit dialog system enables the creation of modals with a title, footer, and content.
Each dialog is created as a distinct component that inherits from [View](../classes/view.View.html).

Several basic wrappers are readily available to swiftly create fundamental windows: [Alert](./dialog.html#alert)/[Confirm](./dialog.html#confirm)/[Prompt](./dialog.html#prompt)

```js
Jodit.Alert('Hello world!', () => {
  // After OK
});
Jodit.Confirm('Are you sure?', 'Confirm Dialog', yes => {
  if (yes) {
    // do something
  }
});
Jodit.Prompt('Enter your name', 'Prompt Dialog', name => {
  if (name.length < 3) {
    Jodit.Alert('The name must be at least 3 letters');
    return false;
  }
  // do something
});
```

Each of these wrappers returns an [IDialog](../interfaces/types.IDialog.html) object, and you can expand the open window.

```js
const dialog = Jodit.Alert('Hello world!', () => {
  // After OK
});
dialog.setContent('Buy buy world! =)');
```

> Note that you do not need to call the [Dialog.open](../classes/dialog.Dialog.html#open) method.

For a simpler setup, you can immediately create an instance [Dialog](../classes/dialog.Dialog.html) and already fully manage its contents:

```js
const dialog = new Jodit.modules.Dialog();
dialog.setHeader('The header!');
dialog.setContent('Content');
dialog.setFooter([
  new Jodit.modules.UIButton(dialog).onAction(() => {
    dialog.close();
  })
]);
dialog.open();
```

In all these examples, the dialog opens irrespective of Jodit's configurations, including the selected language and theme.
To ensure the dialog opens in the same theme as the editor, you can specify the theme in its settings, or utilize the [IDlgs](../interfaces/types.IDlgs.html) trait.

```js
const dialog = new Jodit.modules.Dialog({
  theme: 'dark'
});

// or

const editor = Jodit.make('#editor', {
  theme: 'dark'
});
const dialog = editor.dlg();
dialog.setContent('Hello world!');
dialog.open();

editor.alert('Hello world!');
editor.confirm('Hello world?', yes => {
  console.log('Ok?', yes);
});
```

Thanks to the trait mechanism, there's no need to create utility dialogs like Alert/Confirm/Prompt as previously described.
Simply calling the appropriate methods on the [Jodit](../classes/jodit.Jodit.html) instance is sufficient. The dialog will automatically adopt the editor's theme and language settings.

```js
const editor = Jodit.make('#editor', {
  theme: 'dark'
});
editor.alert('Hello world!');
editor.confirm('Hello world?', yes => {
  console.log('Ok?', yes);
});
```

## Dialog container

All `IViewBased` classes has `popupRoot` option (`Dialog`, `Jodit`, `FileBrowser`).
Allows you to specify the parental element of dialogs and popup windows.
If the option is not specified, then when creating a dialogue, there is a bypass of a tree, starting with the editor. If an element is found `dialog` or eny element with `position: fixed` or `position: absolute`, then it is used as a parent.
Also, `shadowRoot` can be used as a Root

Those. Parent search priorities:

1. `popupRoot` option
2. `shadowRoot` option
3. The closest element `dialog` or with style `position: fixed` or `position: absolute`
4. document.body

This is necessary in cases where Jodit is displayed inside the dialog windows with a focus interception.
For example, when inserting in [mui dialog] (https://mui.com/material-ui/react-dialog/)

If this is your situation, then in most cases you won't need to do anything, as Jodit will find the correct parent element on its own.
But if your code logic was configured specifically to insert into `document.body`, then you will need to explicitly specify `popupRoot: document.body`

```typescript
const editor = Jodit.make('#editor', {
  popupRoot: document.body
});
```


## Classes

- [Dialog](../classes/dialog.Dialog.html)

### Alert()

**Alert**(`this`, `msg`, `title?`, `callback?`, `className?`): [`IDialog`](../interfaces/types.IDialog.html)

Defined in: [src/modules/dialog/alert.ts:33](https://github.com/xdan/jodit/blob/main/src/modules/dialog/alert.ts#L33)

Show `alert` dialog. Work without Jodit object

#### Parameters

| Parameter | Type | Default value |
| ------ | ------ | ------ |
| `this` | `unknown` | `undefined` |
| `msg` | `string` \| [`HTMLElement`](https://developer.mozilla.org/docs/Web/API/HTMLElement) | `undefined` |
| `title?` | `string` \| (() => `false` \| `void`) | `undefined` |
| `callback?` | `string` \| ((`dialog`) => `false` \| `void`) | `undefined` |
| `className?` | `string` | `'jodit-dialog_alert'` |

#### Returns

[`IDialog`](../interfaces/types.IDialog.html)

#### Example

```javascript
Jodit.Alert("File was uploaded");
Jodit.Alert("File was uploaded", "Message");
Jodit.Alert("File was uploaded", function() {
   $('form').hide();
});
Jodit.Alert("File wasn't uploaded", "Error", function() {
   $('form').hide();
});
```

***

### Confirm()

**Confirm**(`this`, `msg`, `title`, `callback?`): [`IDialog`](../interfaces/types.IDialog.html)

Defined in: [src/modules/dialog/confirm.ts:30](https://github.com/xdan/jodit/blob/main/src/modules/dialog/confirm.ts#L30)

Show `confirm` dialog. Work without Jodit object

#### Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `this` | `unknown` | - |
| `msg` | `string` | - |
| `title` | `string` \| ((`yes`) => `void`) \| `undefined` | Title or callback |
| `callback?` | (`yes`) => `false` \| `void` | callback. The first argument is the value entered |

#### Returns

[`IDialog`](../interfaces/types.IDialog.html)

#### Example

```javascript
Jodit.Confirm("Are you sure?", "Confirm Dialog", function (yes) {
    if (yes) {
        // do something
    }
});
```

***

### Prompt()

**Prompt**(`this`, `msg`, `title`, `callback`, `placeholder?`, `defaultValue?`): [`IDialog`](../interfaces/types.IDialog.html)

Defined in: [src/modules/dialog/prompt.ts:36](https://github.com/xdan/jodit/blob/main/src/modules/dialog/prompt.ts#L36)

Show `Prompt` dialog. Work without Jodit object

#### Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `this` | `unknown` | - |
| `msg` | `string` | Dialog content |
| `title` | `string` \| (() => `false` \| `void`) \| `undefined` | Title or callback |
| `callback` | (`value`) => `false` \| `void` | callback. The first argument is the value entered |
| `placeholder?` | `string` | Placeholder for input |
| `defaultValue?` | `string` | - |

#### Returns

[`IDialog`](../interfaces/types.IDialog.html)

#### Example

```javascript
Jodit.Prompt("Enter your name", "Prompt Dialog", function (name) {
    if (name.length < 3) {
        Jodit.Alert("The name must be at least 3 letters");
        return false;
    }
    // do something
});
```