Dialog

JointJS+ provides a Dialog plugin that enables the ability to display both modal and non-modal dialog boxes.

Installation

Access Dialog via the ui namespace, create an instance, and call the open() method on it.

import { ui } from '@joint/plus';

const dialog = new ui.Dialog({
    width: 300,
    title: 'My title',
    content: 'This is my dialog box.'
});

dialog.open();

There is also a UMD version available

Include joint.ui.dialog.js and joint.ui.dialog.css in your HTML:

index.html

<link rel="stylesheet" type="text/css" href="joint.ui.dialog.css">
<script src="joint.js"></script>
<script src="joint.ui.dialog.js"></script>

Access Dialog through the joint.ui namespace:

index.js

const dialog = new joint.ui.Dialog({
    width: 300,
    title: 'My title',
    content: 'This is my dialog box.'
});

dialog.open();

How does Dialog work?

It's a little window that overlays all other elements on the page. Dialog supports arbitrary HTML content, allows you to define buttons in an easy way, and can even be inlined on the page in any HTML container. The dialog can be optionally draggable.

Common dialog patterns

There are some common patterns when working with modal windows. While the following example doesn't cover every possibility, you will certainly get some inspiration for working with the Dialog plugin. Opening modals when the user clicks, embedded content, and draggable modals are just some of the use cases shown here.

Open Sandbox

Inlined dialog

It's possible to inline a modal window in any HTML container. Take a look at the following example to get started.

Open Sandbox