Share via


WinJS.UI.WinJS.UI.ContentDialog object

Shows critical information that requires attention or explicit action from the user and temporarily blocks interactions with other elements in the app.

Syntax

<div 
  data-win-control="WinJS.UI.ContentDialog">
  <!-- Content -->
</div>
var object = new WinJS.UI.ContentDialog(element, options);

Members

The ContentDialog object has these types of members:

  • Constructors
  • Events
  • Methods
  • Properties

Constructors

The ContentDialog object has these constructors.

Constructor Description
ContentDialog

Creates a new ContentDialog.

 

Events

The ContentDialog object has these events.

Event Description
onafterhide

Raised immediately after the dialog is hidden.

onaftershow

Raised immediately after the dialog is shown.

onbeforehide

Occurs before the dialog is hidden. When you call preventDefault on this event, the dialog does not hide.

onbeforeshow

Occurs before the dialog is shown. When you call preventDefault on this event, the dialog does not show and the show promise is completed with a canceled promise.

 

Methods

The ContentDialog object has these methods.

Method Description
addEventListener

Registers an event handler for the specified event.

dispose

Releases resources held by the ContentDialog. Call this method when the ContentDialog is no longer needed. After calling this method, the ContentDialog becomes unusable.

hide

Dismisses the dialog.

removeEventListener

Removes an event handler registered with addEventListener.

show

Displays the dialog.

 

Properties

The ContentDialog object has these properties.

Property Access type Description

DismissalResult

Read-only

Gets a value that specifies the reason a dialog was dismissed. This is a static property.

element

Read-only

Gets the DOM element that hosts the ContentDialog.

hidden

Read-only

Gets a value that indicates whether the dialog is hidden.

primaryCommandDisabled

Read/write

Gets or sets whether the dialog's primary command button is disabled.

primaryCommandText

Read/write

Gets or sets the text of the dialog's primary command.

secondaryCommandDisabled

Read/write

Gets or sets whether the dialog's secondary command button is disabled.

secondaryCommandText

Read/write

Gets or sets the text of the dialog's secondary command.

title

Read/write

Gets or sets the dialog's title.

 

Remarks

Known Issues

ContentDialog controls should be direct children of document.body. Otherwise, it is possible to mask event detection on the ContentDialog due to stacking context effects. This is because event detection for other elements is blocked while the ContentDialog is open. So, if the ContentDialog is a child of one of those blocked elements, it too will be blocked. This behavior is typical for all overlaying controls.

CSS classes

To customize the ContentDialog, you can define your own styles for these Cascading Style Sheets (CSS) classes (defined by the Windows Library for JavaScript style sheets):

CSS class Description

win-contentdialog

Styles the entire ContentDialog.

win-contentdialog-backgroundoverlay

Styles the portions of the app that appear behind the shown ContentDialog.

win-contentdialog-commands

Styles the command buttons in a ContentDialog.

win-contentdialog-content

Styles the content portion of the ContentDialog.

win-contentdialog-dialog

Styles the dialog portion of the ContentDialog.

win-contentdialog-primarycommand

Styles the primary command button in a ContentDialog.

win-contentdialog-secondarycommand

Styles the secondary command button in a ContentDialog.

win-contentdialog-title

Styles the title portion of the ContentDialog.

 

Requirements

Minimum WinJS version

WinJS 4.0

Namespace

WinJS.UI