In this example, an instance of the Uize.Widgets.Dialog.Widget class is being used to implement a draggable dialog for a modal dialog. The dialog is not resizable (the corners and sides are NOT active), but it is draggable and can be moved around by clicking-and-dragging on its title bar. The draggable dialog widget has child widgets for the "OK", "CANCEL", and "CLOSE" buttons.

There is a shield that is displayed when the dialog is opened up. This shield is faded out when you drag the dialog, with the idea being that if the user moves a dialog they quite likely are trying to move it out of the way in order to reveal something behind it, so nothing behind the dialog should remain obscured by a shield. Even when not visible, the shield is still present and blocks events to elements beneath the dialog in order to ensure its modal behavior.

The dialog widget provides a facility for a dialog to be moored to any node in a document, regardless of where the mooring node is in the DOM in relation to the dialog which needs to be absolutely positioned and above everything else in the document. The dialog in this example is moored to the DIV conspicuously named "MOORING NODE". Try resizing the document and notice how the dialog keeps its positional relationship to this DIV - even once you've moved the dialog.

To open the dialog, click the "OPEN DIALOG" button below.