JointJS+ 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.


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>


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.'


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.


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).


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.