class S2.UI.Dialog


A class for showing dialogs on screen.


  • zIndex (Number): The CSS z-index for the dialog. Default is 1000.
  • title (String): The text to display in the dialog's title bar. Default is "Dialog".
  • content (String | Element): The content to display as the body of the dialog. Strings can be plaintext or HTML; they'll be inserted as-is into the dialog. If content refers to an element on the page, that element will be detached from its initial location when the dialog is instantiated.
  • submitForms (Boolean): By default, a dialog will suppress the onsubmit event of any forms included in the dialog's content (in order to prevent navigation to a new page). Set this to true to override this behavior.
  • closeOnEscape (Boolean): Whether the dialog closes (with a "cancel" outcome) when the ESC key is pressed. Default is true.
  • draggable (Boolean): Whether the dialog should be draggable (with the dialog's title bar as the handle). Default is true.
  • resizable (Boolean): Whether the dialog should be resizable. Default is false.
  • buttons (Array | Boolean): A set of Objects that describe the buttons that should appear at the bottom of the dialog. Set to false to omit buttons.


All events have a dialog property (e.g., event.memo.dialog) that holds the relevant instance of S2.UI.Dialog. Some events have further properties, as explained below.

  • ui:dialog:before:open: Fired when the dialog is told to open, but before it is displayed on screen. Cancelable. If cancelled, will suppress the display of the dialog.
  • ui:dialog:after:open: Fired just after the dialog is displayed on screen. Cannot be cancelled.
  • ui:dialog:before:close: Fired when the dialog is told to close (whether successfully or unsuccessfully), but before it has been hidden. Cancelable. If cancelled, will suppress the hiding of the dialog.
  • ui:dialog:after:close: Fired just after the dialog disappears from the screen. Cannot be cancelled. The success property is a boolean that tells whether the dialog was closed in success. The form property (present if the dialog's content contained a FORM element) holds an Object serialization of the form's content.



Inherited from Element


new S2.UI.Dialog(element, options)
 new S2.UI.Dialog(options)

If element is given, that element will become the container for the dialog. Otherwise, an element will be created to serve as the container.

Note that the dialog is not displayed on screen when it is created. You must explicitly call S2.UI.Dialog#open first.

Instance methods

  • close #

    S2.UI.Dialog#close(success) -> this
    • success (Boolean) – Whether the dialog should be closed "successfully" (i.e., OK) or "unsuccessfully" (i.e., Cancel).

    Closes the dialog.

  • open #

    S2.UI.Dialog#open() -> this

    Opens the dialog.