WinJS.UI.WinJS.UI.ContentDialog object

Article
01/26/2017

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