Ignite UI™ API Documentation

ui.igDialog

Overview
Options
Events
Methods
Theming

The igDialogWindow is a component which allows you to open both modal and non-modal dialogs on a page. Behaviors like close, pin, maximize and minimize are available for each dialog.

Further information regarding the classes, options, events, methods and themes of this API are available under the associated tabs above.

The following code snippet demonstrates how to initialize the igDialogWindow control.

For details on how to reference the required scripts and themes for the igDialogWindow control read, Using JavaScript Resources in Ignite UI and Styling and Theming Ignite UI.

Code Sample

 
<!doctype html>
<html>
<head>
		<!-- jQuery Core -->
		<script src="js/jquery.js" type="text/javascript"></script>
		<!-- jQuery UI -->
		<script src="js/jquery-ui.js" type="text/javascript"></script>
		<!-- Infragistics Loader Script -->
		<script src="js/infragistics.loader.js" type="text/javascript"></script>
		<!-- Infragistics Loader Initialization -->
		<script type="text/javascript">
				$.ig.loader({
						scriptPath: "js/",
						cssPath: "css/",
						resources: "igDialog"
				});
				
				$.ig.loader(function () {
				// Initialize the igDialog
						$("#dialog").igDialog({
								state: "opened",
								height: 460,
								width: 440
						});
				});
		</script>
</head>
<body>
		<div id="dialog"></div>
</body>
</html>

Related Samples

closeAnimation

Type:: object
Default:: null

Gets/Sets the animation applied to the dialog when it is closed. That can be any object supported by the jquery hide(param) method.

Code Sample

 
				//Initialize
				$(".selector").igDialog({
					closeAnimation : "slide"
				});

				//Get
				var animation = $(".selector").igDialog("option", "closeAnimation");

				//Set
				$(".selector").igDialog("option", "closeAnimation", "slide");

closeButtonTitle
Removed

Type:: string
Default:: ""

This option has been removed as of 2017.2 Volume release.
Gets/Sets the title/tooltip for the close button in the dialog. Use option locale.closeButtonTitle.

Code Sample

 
				//Initialize
				$(".selector").igDialog({
					closeButtonTitle : "X"
				});

				//Get
				var title = $(".selector").igDialog("option", "closeButtonTitle");

				//Set
				$(".selector").igDialog("option", "closeButtonTitle", "X");

closeOnEscape

Type:: bool
Default:: true

Gets/Sets whether the dialog should close when Esc key is pressed.

Code Sample

 
				//Initialize
				$(".selector").igDialog({
					closeOnEscape : false
				});

				//Get
				var closeDialogOnEscape = $(".selector").igDialog("option", "closeOnEscape");

				//Set
				$(".selector").igDialog("option", "closeOnEscape", false);

container

Type:

object

Default:

null
Gets/Sets the container html element for the dialog.
That can be reference to html element, jquery selector or jquery object.
By default the parent form of the original target element is used. If a form is not found, then the body is used.
Note: If the "position" of the container is not set or it is "static", then the position is set to "relative".
Code Sample
```
 
				//Initialize
				$(".selector").igDialog({
					container : objContainer
				});

				//Get
				var objContainer = $(".selector").igDialog("option", "container");
				 
```

dialogClass

Type:: string
Default:: null

Gets the name of the css class which is applied to the main DIV element of the dialog.

Code Sample

 
				//Initialize
				$(".selector").igDialog({
					dialogClass : "myClass"
				});

				//Get
				var myClass = $(".selector").igDialog("option", "dialogClass");

draggable

Type:: bool
Default:: true

Gets/Sets whether the dialog can be dragged by the user.

Code Sample

 
				//Initialize
				$(".selector").igDialog({
					draggable : false
				});

				//Get
				var isDraggable = $(".selector").igDialog("option", "draggable");

				//Set
				$(".selector").igDialog("option", "draggable", false);

enableDblclick

Type:

enumeration

Default:

auto
Gets/Sets the processing of the double-click on the dialog-header. If this option is not false and dialog was minimized, then its state will be set to normal.
If this option is set to "auto" and showMaximizeButton is enabled or if this option is set to true, then the dialog will be maximized when it was in normal state,
and dialog-state will be set to normal if it was maximized.
Code Sample
```
 
				//Initialize
				$(".selector").igDialog({
					enableDblclick : false
				});
				//Get
				var doubleClick = $(".selector").igDialog("option", "enableDblclick");
				//Set
				$(".selector").igDialog("option", "enableDblclick", false);
				 
```

enableHeaderFocus

Type:: bool
Default:: true

Gets/Sets the ability to adjust the state of the header depending on focused and not-focused states. Note: the "trackFocus" option should be enabled.

Code Sample

 
				//Initialize
				$(".selector").igDialog({
					enableHeaderFocus : false
				});

				//Get
				var hasHeaderFocus = $(".selector").igDialog("option", "enableHeaderFocus");

				//Set
				$(".selector").igDialog("option", "enableHeaderFocus", false);

footerText

Type:: string
Default:: null

Gets/Sets the text which appears in the footer of the dialog.

Code Sample

 
				//Initialize
				$(".selector").igDialog({
					footerText : "FOOTER"
				});

				//Get
				var text = $(".selector").igDialog("option", "footerText");

				//Set
				$(".selector").igDialog("option", "footerText", "FOOTER");

headerText

Type:: string
Default:: null

Gets/Sets the text which appears in the header of the dialog.

Code Sample

 
				//Initialize
				$(".selector").igDialog({
					headerText : "HEADER"
				});

				//Get
				var text = $(".selector").igDialog("option", "headerText");

				//Set
				$(".selector").igDialog("option", "headerText", "HEADER");

height

Type:

enumeration

Default:

null
Gets/Sets the initial height of the dialog in pixels for normal state. Besides numeric values, following units are supported: "px", "em" and "%".
In case of "%", the size of browser window is used and it has effect only on open action.
Code Sample
```
 
				//Initialize
				$(".selector").igDialog({
					height : 500
				});
				//Get
				var height = $(".selector").igDialog("option", "height");
				//Set
				$(".selector").igDialog("option", "height", 500);
				 
```

imageClass

Type:: string
Default:: null

Gets the name of the css class which is applied to the SPAN element located on the left side of the header.

Code Sample

 
				//Initialize
				$(".selector").igDialog({
					imageClass : "dialog-header-image"
				});

				//Get
				var class = $(".selector").igDialog("option", "imageClass");

language
Inherited

Type:: string
Default:: "en"

Set/Get the locale language setting for the widget.

Code Sample

 
					//Initialize
				$(".selector").igDialog({
					language: "ja"
				});

				// Get
				var language = $(".selector").igDialog("option", "language");

				// Set
				$(".selector").igDialog("option", "language", "ja");

locale

Type:: object
Default:: {}

closeButtonTitle

Type:: string
Default:: ""

Gets/Sets the title/tooltip for the close button in the dialog.

Code Sample

 
				//Initialize
				$(".selector").igDialog({
					locale: {
						closeButtonTitle : "Close"
					}
				});

				//Get
				var text = $(".selector").igDialog("option", "locale").closeButtonTitle;

				//Set
				$(".selector").igDialog("option", "locale", { closeButtonTitle: "Close"});

maximizeButtonTitle

Type:: string
Default:: ""

Gets/Sets the title/tooltip for the maximize button in the dialog.

Code Sample

 
				//Initialize
				$(".selector").igDialog({
					locale: {
						maximizeButtonTitle : "Maximize"
					}
				});

				//Get
				var text = $(".selector").igDialog("option", "locale").maximizeButtonTitle;

				//Set
				$(".selector").igDialog("option", "locale", { maximizeButtonTitle: "Maximize"});

minimizeButtonTitle

Type:: string
Default:: ""

Gets/Sets the title/tooltip for the minimize button in the dialog.

Code Sample

 
				//Initialize
				$(".selector").igDialog({
					locale: {
						minimizeButtonTitle : "Minimize"
					}
				});

				//Get
				var text = $(".selector").igDialog("option", "locale").minimizeButtonTitle;

				//Set
				$(".selector").igDialog("option", "locale", { minimizeButtonTitle: "Minimize"});

pinButtonTitle

Type:: string
Default:: ""

Gets/Sets the title/tooltip for the pin button in the dialog.

Code Sample

 
				//Initialize
				$(".selector").igDialog({
					locale: {
						pinButtonTitle : "Pin"
					}
				});

				//Get
				var text = $(".selector").igDialog("option", "locale").pinButtonTitle;

				//Set
				$(".selector").igDialog("option", "locale", { pinButtonTitle: "Pin"});

restoreButtonTitle

Type:: string
Default:: ""

Gets/Sets the title/tooltip for the restore button in the dialog.

Code Sample

 
				//Initialize
				$(".selector").igDialog({
					locale: {
						restoreButtonTitle : "Restore"
					}
				});

				//Get
				var text = $(".selector").igDialog("option", "locale").restoreButtonTitle;

				//Set
				$(".selector").igDialog("option", "locale", { restoreButtonTitle: "Restore"});

unpinButtonTitle

Type:: string
Default:: ""

Gets/Sets the title/tooltip for the pin button in the dialog.

Code Sample

 
				//Initialize
				$(".selector").igDialog({
					locale: {
						unpinButtonTitle : "Unpin"
					}
				});

				//Get
				var text = $(".selector").igDialog("option", "locale").unpinButtonTitle;

				//Set
				$(".selector").igDialog("option", "locale", { unpinButtonTitle: "Unpin"});

mainElement

Type:

domelement

Default:

null
Gets the jquery DIV object which is used as the main container for the dialog.
Notes:
1. That object is optional and it should not contain any children.
2. It should not have parent.
3. It should not contain attributes which might destroy layout or appearance of the dialog.
4. Change of that option is not supported.
Code Sample
```
 
				//Initialize
				$(".selector").igDialog({
					mainElement : objContainer
				});

				//Get
				var objContainer = $(".selector").igDialog("option", "mainElement");
				 
```

maxHeight

Type:: number
Default:: null

Gets/Sets the maximal height of the dialog in normal state. Note: that option has effect only while resizing the dialog by the end user.

Code Sample

 
				//Initialize
				$(".selector").igDialog({
					maxHeight : 1000
				});

				//Get
				var maxHeight = $(".selector").igDialog("option", "maxHeight");

				//Set
				$(".selector").igDialog("option", "maxHeight", 1000);

maximizeButtonTitle
Removed

Type:: string
Default:: ""

This option has been removed as of 2017.2 Volume release.
Gets/Sets the title/tooltip for the maximize button in the dialog. Use option locale.minimizeButtonTitle.

Code Sample

 
				//Initialize
				$(".selector").igDialog({
					maximizeButtonTitle : "MAX"
				});

				//Get
				var title = $(".selector").igDialog("option", "maximizeButtonTitle");

				//Set
				$(".selector").igDialog("option", "maximizeButtonTitle", "MAX");

maxWidth

Type:: number
Default:: null

Gets/Sets the maximal width of the dialog in normal state. Note: that option has effect only while resizing the dialog by the end user.

Code Sample

 
				//Initialize
				$(".selector").igDialog({
					maxWidth : 1000
				});

				//Get
				var maxWidth = $(".selector").igDialog("option", "maxWidth");

				//Set
				$(".selector").igDialog("option", "maxWidth", 1000);

minHeight

Type:: number
Default:: 100

Gets/Sets the minimal height of the dialog in normal state.

Code Sample

 
				//Initialize
				$(".selector").igDialog({
					minHeight : 100
				});

				//Get
				var minHeight = $(".selector").igDialog("option", "minHeight");

				//Set
				$(".selector").igDialog("option", "minHeight", 100);

minimizeButtonTitle
Removed

Type:: string
Default:: ""

This option has been removed as of 2017.2 Volume release.
Gets/Sets the title/tooltip for the minimize button in the dialog. Use option locale.minimizeButtonTitle.

Code Sample

 
				//Initialize
				$(".selector").igDialog({
					minimizeButtonTitle : "MIN"
				});

				//Get
				var title = $(".selector").igDialog("option", "minimizeButtonTitle");

				//Set
				$(".selector").igDialog("option", "minimizeButtonTitle", "MIN");

minWidth

Type:: number
Default:: 150

Gets/Sets the minimal width of the dialog in normal state.

Code Sample

 
				//Initialize
				$(".selector").igDialog({
					minWidth : 100
				});

				//Get
				var minWidth = $(".selector").igDialog("option", "minWidth");

				//Set
				$(".selector").igDialog("option", "minWidth", 100);

modal

Type:

bool

Default:

false
Gets/Sets the modal state of the dialog.
If there are more than 1 modal igDialog, then the last opened dialog wins and becomes on the top.
Note: the modal functionality is not supported when the dialog is minimized or pinned, because that will trigger misbehavior.
Code Sample
```
 
				//Initialize
				$(".selector").igDialog({
					modal : true
				});

				//Get
				var isModal = $(".selector").igDialog("option", "modal");

				//Set
				$(".selector").igDialog("option", "modal", true);
				 
```

openAnimation

Type:: object
Default:: null

Gets/Sets the animation applied to the dialog when it is opened. That can be any object supported by the jquery show(param) method.

Code Sample

 
				//Initialize
				$(".selector").igDialog({
					openAnimation : "explode"
				});

				//Get
				var animation = $(".selector").igDialog("option", "openAnimation");

				//Set
				$(".selector").igDialog("option", "openAnimation", "explode");

pinButtonTitle
Removed

Type:: string
Default:: ""

This option has been removed as of 2017.2 Volume release.
Gets/Sets the title/tooltip for the pin button in the dialog. Use option locale.pinButtonTitle.

Code Sample

 
				//Initialize
				$(".selector").igDialog({
					pinButtonTitle : "PIN"
				});

				//Get
				var tilte = $(".selector").igDialog("option", "pinButtonTitle");

				//Set
				$(".selector").igDialog("option", "pinButtonTitle", "PIN");

pinned

Type:

bool

Default:

false
Gets/Sets whether the dialog is pinned.
When the dialog is pinned, then the html element of the dialog is moved to the original container where the target element was located and position:absolute is removed.
The pinned dialog does not support modal state, maximized state and it can not be moved.
Notes:
1. If the parent element of the original target-element is invisible, then the pinned dialog becomes invisible as well.
2. Pinned state is not supported for modal dialog.
Code Sample
```
 
				//Initialize
				$(".selector").igDialog({
					pinned : true
				});

				//Get
				var isPinned = $(".selector").igDialog("option", "pinned");

				//Set
				$(".selector").igDialog("option", "pinned", true);
				 
```

pinOnMinimized

Type:: bool
Default:: false

Gets/Sets whether the dialog will be pinned on minimize.

Code Sample

 
				//Initialize
				$(".selector").igDialog({
					pinOnMinimized : true
				});

				//Get
				var pinDialogOnMinimized = $(".selector").igDialog("option", "pinOnMinimized");

				//Set
				$(".selector").igDialog("option", "pinOnMinimized", true);

position

Type:

object

Default:

null
Gets/Sets the initial position of the dialog. That should be an object, which contains "top" and "left" members or an object
supported by jquery.position(param) method. Examples: { left: 100, top: 200 }, { my: "left top", at: "left top", offset: "100 200" }.
Code Sample
```
 
				//Initialize
				$(".selector").igDialog({
					position : { left: 100, top: 200 }
				});

				//Get
				var position = $(".selector").igDialog("option", "position");

				//Set
				$(".selector").igDialog("option", "position", { left: 100, top: 200 });
				 
```

regional
Inherited

Type:: enumeration
Default:: en-US

Set/Get the regional setting for the widget.

Code Sample

 
				//Initialize
				$(".selector").igDialog({
					regional: "ja"
				});
				// Get
				var regional = $(".selector").igDialog("option", "regional");
				// Set
				$(".selector").igDialog("option", "regional", "ja");

resizable

Type:: bool
Default:: true

Gets/Sets whether the dialog can be resized by the user.

Code Sample

 
				//Initialize
				$(".selector").igDialog({
					resizable : false
				});

				//Get
				var isResizable = $(".selector").igDialog("option", "resizable");

				//Set
				$(".selector").igDialog("option", "resizable", false);

restoreButtonTitle
Removed

Type:: string
Default:: ""

This option has been removed as of 2017.2 Volume release.
Gets/Sets the title/tooltip for the restore button in the dialog. Use option locale.restoreButtonTitle.

Code Sample

 
				//Initialize
				$(".selector").igDialog({
					restoreButtonTitle : "RESTORE"
				});

				//Get
				var title = $(".selector").igDialog("option", "restoreButtonTitle");

				//Set
				$(".selector").igDialog("option", "restoreButtonTitle", "RESTORE");

showCloseButton

Type:: bool
Default:: true

Gets/Sets whether the close button in the dialog header should be visible.

Code Sample

 
				//Initialize
				$(".selector").igDialog({
					showCloseButton : false
				});

				//Get
				var showDialogCloseButton = $(".selector").igDialog("option", "showCloseButton");

				//Set
				$(".selector").igDialog("option", "showCloseButton", false);

showFooter

Type:: bool
Default:: false

Gets/Sets whether the dialog footer should be visible.

Code Sample

 
				//Initialize
				$(".selector").igDialog({
					showFooter : true
				});

				//Get
				var showDialogFooter = $(".selector").igDialog("option", "showFooter");

				//Set
				$(".selector").igDialog("option", "showFooter", true);

showHeader

Type:: bool
Default:: true

Gets/Sets whether the dialog header should be visible.

Code Sample

 
				//Initialize
				$(".selector").igDialog({
					showHeader : false
				});

				//Get
				var showDialogHeader = $(".selector").igDialog("option", "showHeader");

				//Set
				$(".selector").igDialog("option", "showHeader", false);

showMaximizeButton

Type:: bool
Default:: false

Gets/Sets whether the maximize button in the dialog header should be visible.

Code Sample

 
				//Initialize
				$(".selector").igDialog({
					showMaximizeButton : true
				});

				//Get
				var showDialogMaximizeButton = $(".selector").igDialog("option", "showMaximizeButton");

				//Set
				$(".selector").igDialog("option", "showMaximizeButton", true);

showMinimizeButton

Type:: bool
Default:: false

Gets/Sets whether the minimize button in the dialog header should be visible.

Code Sample

 
				//Initialize
				$(".selector").igDialog({
					showMinimizeButton : true
				});

				//Get
				var showDialogMinimizeButton = $(".selector").igDialog("option", "showMinimizeButton");

				//Set
				$(".selector").igDialog("option", "showMinimizeButton", true);

showPinButton

Type:: bool
Default:: false

Gets/Sets whether the pin button in the dialog header should be visible.

Code Sample

 
				//Initialize
				$(".selector").igDialog({
					showPinButton : true
				});

				//Get
				var showDialogPinButton = $(".selector").igDialog("option", "showPinButton");

				//Set
				$(".selector").igDialog("option", "showPinButton", true);

state

Type:

enumeration

Default:

opened
Gets/Sets the state of the dialog. Note: when the dialog is modal, then pinned and minimized states are not supported, because that will trigger misbehavior.
Members
- opened
- Type:string
- The dialog is opened.
- minimized
- Type:string
- The dialog is minimized.
- maximized
- Type:string
- The dialog is maximized.
- closed
- Type:string
- The dialog is closed.
Code Sample
```
 
				//Initialize
				$(".selector").igDialog({
					state : "maximized"
				});
				//Get
				var state = $(".selector").igDialog("option", "state");
				//Set
				$(".selector").igDialog("option", "state", "maximized");
				 
```

tabIndex

Type:: number
Default:: 0

Gets/Sets the value for the tabIndex attribute applied to the main html element of the dialog.

Code Sample

 
				//Initialize
				$(".selector").igDialog({
					tabIndex : 1
				});

				//Get
				var state = $(".selector").igDialog("option", "tabIndex");

				//Set
				$(".selector").igDialog("option", "tabIndex", 1);

temporaryUrl

Type:

string

Default:

null
Gets/Sets the temporary value for src, which is used while changing the parent of the base element if it is an instance of IFRAME. That allows getting around possible JavaScript exceptions under IE.
Code Sample
```
 
				//Initialize
				$(".selector").igDialog({
					temporaryUrl : "http://infragistics.com"
				});

				//Get
				var url = $(".selector").igDialog("option", "http://infragistics.com");
				 
```
trackFocus

Type:

bool

Default:

true
Gets/Sets the ability to process focus and blur events of the child elements located in the dialog in order to maintain the focused state.
Notes:
If that option is enabled, then focus and blur event handlers are added to all the child elements of the dialog.
If the dialog is modal or it can be maximized, then it is not recommended to disable that option.
If that option is modified after the igDialog was already created, then depending on current state of the dialog, it will be temporary closed-opened or opened-closed.
Code Sample
```
 
				//Initialize
				$(".selector").igDialog({
					trackFocus : false
				});

				//Get
				var trackDialogFocus = $(".selector").igDialog("option", "trackFocus");

				//Set
				$(".selector").igDialog("option", "trackFocus", false);
				 
```

unpinButtonTitle
Removed

Type:: string
Default:: ""

This option has been removed as of 2017.2 Volume release.
Gets/Sets the title/tooltip for the unpin button in the dialog. Use option locale.unpinButtonTitle.

Code Sample

 
				//Initialize
				$(".selector").igDialog({
					unpinButtonTitle : "UNPIN"
				});

				//Get
				var title = $(".selector").igDialog("option", "unpinButtonTitle");

				//Set
				$(".selector").igDialog("option", "unpinButtonTitle", "UNPIN");

width

Type:

enumeration

Default:

300
Gets/Sets the initial width of the dialog in pixels for normal state. Besides numeric values, following units are supported: "px", "em" and "%".
In case of "%", the size of browser window is used and it has effect only on open action.
Code Sample
```
 
				//Initialize
				$(".selector").igDialog({
					width : 500
				});
				//Get
				var width = $(".selector").igDialog("option", "width");
				//Set
				$(".selector").igDialog("option", "width", 500);
				 
```

zIndex

Type:: number
Default:: null

Gets/Sets the value of zIndex applied to the main html element of the dialog. If value is not set, then 1000 is used.

Code Sample

 
				//Initialize
				$(".selector").igDialog({
					zIndex : 1001
				});

				//Get
				var zIndex = $(".selector").igDialog("option", "zIndex");

				//Set
				$(".selector").igDialog("option", "zIndex", 1001);

For more information on how to interact with the Ignite UI controls' events, refer to
Using Events in Ignite UI.

Note: Calling API methods programmatically does not raise events related to their operation unless specifically stated otherwise by the corresponding API documentation; those events are only raised by their respective user interaction.

Show Details

animationEnded

Cancellable:: false

Event which is raised after the end of the animation when the dialod was closed or opened.

The function takes arguments "evt" and "ui".
Use ui.owner to obtain a reference to the igDialog.
Use ui.action to obtain the name of the action, which triggered the animation.
"open" - the dialog was opened
"close" - the dialog was closed.

Code Sample

 
				//Bind after initialization
				$(document).delegate(".selector", "igdialoganimationended", function (evt, ui) {
					//return the triggered browser event
					evt;

					// Reference to the igDialog widget.
					ui.owner

					// Obtain one of the following dialog actions:
					//  - "open"
					//  - "close"
					ui.action
				});

				//Initialize
				$(".selector").igDialog({
					animationEnded : function(evt, ui) {...}
				});

blur

Cancellable:: false

Event which is raised when the dialog or its content loses focus.

The function takes arguments "evt" and "ui".
Use evt to obtain the browser event.
Use ui.owner to obtain a reference to the igDialog.

Code Sample

 
				//Bind after initialization
				$(document).delegate(".selector", "igdialogblur", function (evt, ui) {
					//return the triggered browser event
					evt;

					// Reference to the igDialog widget.
					ui.owner
				});

				//Initialize
				$(".selector").igDialog({
					blur : function(evt, ui) {...}
				});

focus

Cancellable:: false

Event which is raised when the dialog or its content gets focus.

The function takes arguments "evt" and "ui".
Use evt to obtain the browser event.
Use ui.owner to obtain a reference to the igDialog.

Code Sample

 
				//Bind after initialization
				$(document).delegate(".selector", "igdialogfocus", function (evt, ui) {
					//return the triggered browser event
					evt;

					// Reference to the igDialog widget.
					ui.owner
				});

				//Initialize
				$(".selector").igDialog({
					focus : function(evt, ui) {...}

stateChanged

Cancellable:

false

Event which is raised after the state of the dialog was changed.

The function takes arguments "evt" and "ui".
Use evt to obtain the browser event. That parameter can be null if the state was modified from the code.
Use ui.owner to obtain a reference to the igDialog.
Use ui.button to obtain the name of the button, which triggered the event. Note: if the state was modified from the code, then "button" is undefined.
Use ui.oldState to obtain the old state of the dialog, which can be one of the following: "opened", "minimized", "maximized", "closed".
Use ui.oldPinned to obtain the boolean value of the old pin state of the dialog.
Use ui.action to obtain the name of the action. That can be one of the following:
"open" - the dialog was opened. Note: the event is raised before a possible "openAnimation" started.
"close" - the dialog was closed. Note: the event is raised before a possible "closeAnimation" started.
"minimize" - the dialog was minimized
"maximize" - the dialog was maximized
"restore" - the dialog was restored from minimized or maximized state
"pin" - the dialog was pinned
"unpin" - the dialog was unpinned.
Code Sample
```
 
				//Bind after initialization
				$(document).delegate(".selector", "igdialogstatechanged", function (evt, ui) {
					//return the triggered browser event
					evt;

					// Reference to the igDialog widget.
					ui.owner

					// Obtain the name of the button, which triggers the event. If the igDialog state was modified from the code, using the control API, then the "button" property is undefined.
					ui.button

					// Obtain the old state of the igDialog. The possible values are: "opened", "minimized", "maximized", "closed".
					ui.oldState

					// Obtain if the old state of the igDialog was pinned.
					ui.oldPinned

					// Obtain one of the following dialog actions:
					//  - "open"
					//  - "close"
					//  - "minimize"
					//  - "maximize"
					//  - "restpore"
					//  - "pin"
					//  - "unpin"
					ui.action
				});

				//Initialize
				$(".selector").igDialog({
					stateChanged : function(evt, ui) {...}
				});
				 
```
stateChanging

Cancellable:

true

Event which is raised before the state of dialog was changed.
Return false in order to cancel action.

The function takes arguments "evt" and "ui".
Use evt to obtain the browser event. That parameter can be null if the state was modified from the code.
Use ui.owner to obtain a reference to the igDialog.
Use ui.button to obtain the name of the button, which triggered the event. Note: if the state was modified from the code, then "button" is undefined.
Use ui.oldState to obtain the old state of the dialog, which can be one of the following: "opened", "minimized", "maximized", "closed".
Use ui.oldPinned to obtain the boolean value of the old pin state of the dialog.
Use ui.action to obtain the name of the action. That can be one of the following:
"open" - request to open the dialog
"close" - request to close the dialog
"minimize" - request to minimize the dialog
"maximize" - request to maximize the dialog
"restore" - request to restore the dialog from minimized or maximized state
"pin" - request to pin the dialog
"unpin" - request to unpin the dialog.
Code Sample
```
 
				//Bind after initialization
				$(document).delegate(".selector", "igdialogstatechanging", function (evt, ui) {
					//return the triggered browser event
					evt;

					// Reference to the igDialog widget.
					ui.owner

					// Obtain the name of button, which triggers the event. If the igDialog state was modified from the code, using control API, then the "button" property is undefined.
					ui.button

					// Obtain the old state of the igDialog. The possible values are: "opened", "minimized", "maximized", "closed".
					ui.oldState

					// Obtain if the old state of the igDialog was pinned.
					ui.oldPinned

					// Obtain one of the following dialog actions:
					//  - "open"
					//  - "close"
					//  - "minimize"
					//  - "maximize"
					//  - "restpore"
					//  - "pin"
					//  - "unpin"
					ui.action
				});

				//Initialize
				$(".selector").igDialog({
					stateChanging : function(evt, ui) {...}
				});
				 
```

Show Details

changeGlobalLanguage
Inherited

.igDialog( "changeGlobalLanguage" );
Changes the widget language to global language. Global language is the value in $.ig.util.language.
Code Sample
```
 
				$(".selector").igDialog("changeGlobalLanguage");
			 
```
changeGlobalRegional
Inherited

.igDialog( "changeGlobalRegional" );
Changes the widget regional settins to global regional settings. Global regional settings are container in $.ig.util.regional.
Code Sample
```
 
				$(".selector").igDialog("changeGlobalRegional");
			 
```
changeLocale

.igDialog( "changeLocale" );
Changes the all locales into the widget element to the language specified in options.language
Note that this method is for rare scenarios, see language or locale option setter.
Code Sample
```
 
				$(".selector").igDialog("changeLocale");
			 
```
close

.igDialog( "close", [e:object] );

Return Type:

object

Return Type Description:

Returns reference to this igDialog.
Closes the dialog if it is opened.
Notes:
1. If the state of the dialog changes, then stateChanging and stateChanged events are raised.
2. That method does not change minimized or maximized state of the dialog.
It means that method "open" will open the dialog and keep previous minimized or maximized state.
- e
- Type:object
- Optional
- Browser event: internal use only.
Code Sample
```
 
				$(".selector").igDialog("close", e);
				 
```
content

.igDialog( "content", [newContent:string] );

Return Type:

object

Return Type Description:

If no parameter is provided then the method returns the container carrying the igDialog content. This is the inner container of the dialog window excluding headers, resizing handlers, etc.
Retrieves the igDialog content container or sets its content to be the new content provided.
- newContent
- Type:string
- Optional
- The new html content provided as a string. If the parameter is provided then the method acts as a setter.
Code Sample
```
 
				//Get
				$(".selector").igDialog("content");

				//Set
				$(".selector").igDialog("content", "<div>New content</div>");
				` 
```
destroy

.igDialog( "destroy" );

Return Type:

object

Return Type Description:

Returns a reference to this igDialog.
Destroys the igDialog and moves the target element to its original parent.
Code Sample
```
 
				$(".selector").igDialog("destroy");
				 
```
getTopModal

.igDialog( "getTopModal" );

Return Type:

object

Return Type Description:

reference to igDialog or null.
Gets a reference to the top modal dialog.
Code Sample
```
 
				$(".selector").igDialog("getTopModal");
				 
```
isTopModal

.igDialog( "isTopModal" );

Return Type:

bool

Return Type Description:

true: the dialog is on top.
Checks if the dialog is modal and if it is currently active.
Code Sample
```
 
				$(".selector").igDialog("isTopModal");
				 
```
mainElement

.igDialog( "mainElement" );

Return Type:

domelement

Return Type Description:

Returns a reference to the jQuery object.
Gets reference to the dynamically created DIV element which represents the dialog.
Code Sample
```
 
				$(".selector").igDialog("mainElement");
				 
```
maximize

.igDialog( "maximize" );

Return Type:

object

Return Type Description:

Returns a reference to this igDialog.
Maximizes the dialog if it is not maximized.
Note: If the state of the dialog changes, then stateChanging and stateChanged events are raised.
Code Sample
```
 
				$(".selector").igDialog("maximize");
				 
```
minimize

.igDialog( "minimize" );

Return Type:

object

Return Type Description:

Returns a reference to this igDialog.
Minimizes the dialog if it is not minimized.
Note: If the state of the dialog changes, then stateChanging and stateChanged events are raised.
Code Sample
```
 
				$(".selector").igDialog("minimize");
				 
```
moveToTop

.igDialog( "moveToTop", [e:object] );

Return Type:

object

Return Type Description:

Returns a reference to this igDialog.
Moves a not modal dialog to the top.
- e
- Type:object
- Optional
- Original event of browser.
Code Sample
```
 
				$(".selector").igDialog("moveToTop", e);
				 
```
open

.igDialog( "open" );

Return Type:

object

Return Type Description:

Returns а reference to this igDialog.
Opens the dialog if it is closed. Notes:
1. If the state of the dialog changes, then stateChanging and stateChanged events are raised.
2. That method does not change minimized or maximized state of the dialog. It means that if the dialog was in minimized or maximized stated when closed by "close" method, then the dialog will open in minimized or maximized state respectively.
Code Sample
```
 
				$(".selector").igDialog("open");
				 
```
pin

.igDialog( "pin" );

Return Type:

object

Return Type Description:

Returns a reference to this igDialog.
Pins the dialog if it is not pinned.
When the dialog is pinned, then the html element of the dialog is moved to the original container where the target element was located and position:absolute is removed.
The pinned dialog does not support modal state, maximized state and it can not be moved.
Notes:
1. If the parent element of the original target-element is invisible, then the pinned dialog becomes invisible as well.
2. If the state of the dialog changes, then stateChanging and stateChanged events are raised.
Code Sample
```
 
				$(".selector").igDialog("pin");
				 
```
restore

.igDialog( "restore" );

Return Type:

object

Return Type Description:

Returns a reference to this igDialog.
Sets the normal state for the dialog if it was maximized or minimized.
Note: If the state of the dialog changes, then stateChanging and stateChanged events are raised.
Code Sample
```
 
				$(".selector").igDialog("restore");
				 
```
state

.igDialog( "state", [state:string] );

Return Type:

string

Return Type Description:

Returns the state.
Gets/Sets the state of the editor.
Note: If the state of the dialog changes, then stateChanging and stateChanged events are raised.
- state
- Type:string
- Optional
- New state.
Code Sample
```
 
				// Get
				$(".selector").igDialog("state");

				// Set
				$(".selector").igDialog("state", "minimized");
				 
```
unpin

.igDialog( "unpin" );

Return Type:

object

Return Type Description:

Returns a reference to this igDialog.
Unpins the dialog if it is pinned.
Note: If the state of the dialog changes, then stateChanging and stateChanged events are raised.
Code Sample
```
 
				$(".selector").igDialog("unpin");
				 
```

ui-igdialog-buttonclose

Classes applied to the close button located in header.
ui-igdialog-close-icon ui-icon ui-icon-close

Classes applied to the icon of close button.
ui-igdialog-content ui-widget-content ui-dialog-content

Classes applied to the content area of dialog.
ui-igdialog-content-iframe

Classes applied to the content area of dialog when target element is IFRAME.
ui-igdialog ui-dialog ui-widget

Classes applied to the main/top element.
ui-igdialog-dragging

Classes applied to dialog while dragging.
ui-igdialog-footer ui-widget-header ui-corner-bottom ui-helper-clearfix

Classes applied to the footer.
ui-igdialog-header ui-dialog-titlebar ui-widget-header

Classes applied to the header.
ui-igdialog-headerbutton ui-corner-all ui-state-default

Classes applied to the buttons located in header.
ui-igdialog-headerbutton-hover ui-state-hover

Classes applied to the buttons located in header when mouse is moved over them.
ui-igdialog-header-focus ui-state-focus

Classes applied to the header in focused state.
ui-igdialog-headerimage

Extra class applied to SPAN which represents image in header, when "image" option is set.
ui-corner-bottom

Classes applied to the header in minimized state.
ui-igdialog-headertext ui-dialog-title

Classes applied to the header text.
ui-igdialog-headertext-minimized

Classes applied to the header text when dialog is in minimized state.
ui-igdialog-buttonmaximize

Classes applied to the maximize button located in header.
ui-igdialog-maximize-icon ui-icon ui-icon-extlink

Classes applied to the icon of maximize button.
ui-igdialog-buttonminimize

Classes applied to the minimize button located in header.
ui-igdialog-minimize-icon ui-icon ui-icon-minus

Classes applied to the icon of minimize button.
ui-igdialog-overlay ui-widget-overlay

Classes applied to the shell element when dialog is in modal state.
ui-igdialog-buttonpin

Classes applied to the pin button located in header.
ui-igdialog-pin-icon ui-icon ui-icon-pin-s

Classes applied to the icon of pin button.
ui-igdialog-resizing

Classes applied to dialog while resizing.
ui-igdialog-restore-icon ui-icon ui-icon-newwin

Classes applied to the icon of restore button.
ui-igdialog-unmovable

Classes applied to header when dialog is in unmovable state such as maximized of pinned.
ui-igdialog-unpin-icon ui-icon ui-icon-pin-w

Classes applied to the icon of unpin button.

Ignite UI | Samples

ui.igDialog

Code Sample

Related Samples

Related Topics

Dependencies

Inherits

closeAnimation

Code Sample

closeButtonTitleRemoved

Code Sample

closeOnEscape

Code Sample

container

Code Sample

dialogClass

Code Sample

draggable

Code Sample

enableDblclick

Code Sample

enableHeaderFocus

Code Sample

footerText

Code Sample

headerText

Code Sample

height

Code Sample

imageClass

Code Sample

languageInherited

Code Sample

locale

closeButtonTitle

Code Sample

maximizeButtonTitle

Code Sample

minimizeButtonTitle

Code Sample

pinButtonTitle

Code Sample

restoreButtonTitle

Code Sample

unpinButtonTitle

Code Sample

mainElement

Code Sample

maxHeight

Code Sample

maximizeButtonTitleRemoved

Code Sample

maxWidth

Code Sample

minHeight

Code Sample

minimizeButtonTitleRemoved

Code Sample

minWidth

Code Sample

modal

Code Sample

openAnimation

Code Sample

pinButtonTitleRemoved

Code Sample

pinned

Code Sample

pinOnMinimized

Code Sample

position

Code Sample

regionalInherited

Code Sample

resizable

Code Sample

restoreButtonTitleRemoved

Code Sample

showCloseButton

Code Sample

closeButtonTitle
Removed

language
Inherited

maximizeButtonTitle
Removed

minimizeButtonTitle
Removed

pinButtonTitle
Removed

regional
Inherited

restoreButtonTitle
Removed

unpinButtonTitle
Removed

changeGlobalLanguage
Inherited

changeGlobalRegional
Inherited