JointJS+ Dialog

ui.Dialog

ui.Dialog is a UI widget for displaying both modal and non-modal dialog boxes. It's a little window that overlays all other elements on the page. ui.Dialog supports an 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.

Installation

Include joint.ui.dialog.js and joint.ui.dialog.css files to your HTML:

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

Usage

Simply create an object of ui.Dialog type and call open() method on it:

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

Configuration

The following table lists options that you can pass to the ui.Dialog constructor function:

width The width of the dialog in pixels.

title The title of the dialog.

content The content of the dialog. It can be a string or HTML or even a DOM element.

type The type of the dialog. This effectively sets a CSS class on the dialog HTML container. The predefined dialog types are: 'info', 'alert', 'warning', 'success' and 'neutral'.

buttons

Buttons of the dialog. buttons is an array of objects of the form { action: String, content: String [, position: String] }.

action	The name of the action the button represents. When the button is clicked, the dialog object triggers an event `action:[name]`, allowing you to react.
content	The label of the button (it can be HTML, as well).
position	Optional. It can be `'left'`, `'right'`, or `'center'`. If `position` is not specified, it is considered to be `'right'`. If multiple buttons are provided with the same `position`, they are placed left-to-right according to the order in which they were provided.

draggable If draggable is true, the dialog window will be draggable by the user. It defaults to false.

closeButton If closeButton is false, the dialog window will not display the default cross button in the top right corner allowing the user to close the dialog. It defaults to true.

closeButtonContent The HTML content of the little close button in the top right corner of the dialog window. It defaults to a cross (×).

modal If false, the dialog window will not be made modal. In other words, the user will still be able to interact with other elements on the page. It defaults to true.

inlined If true, the dialog window will be inlined in a container that you can pass to the open() method.

API

open()	Open the dialog window.
close()	Close the dialog window.
on(event, handler [, context])	Register a `handler` function that will be called whenever `event` is triggered. The optional `context` is an object that will be the context of the handler function (the `this`).

Events

The ui.Dialog object triggers events when the user clicks one of its buttons. Events can be handled by using the on() method.

action:[name]	Triggered when the user clicks a button in the dialog with action named `[name]`.
close	Triggered when the dialog gets closed.