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.

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.