Ignite UI API Reference

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

Sets gets animation applied to dialog when it is closed. That can be any object supported by 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

Type:: string
Default:: null

Sets gets title/tooltip for close button in dialog. That is override for $.ig.Dialog.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

Sets gets ability to close dialog on Esc key.

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

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

Type:

string

Default:

null

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

draggable

Type:: bool
Default:: true

Sets gets ability to drag dialog by end 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

Sets gets processing dblclick on dialog-header. If option is not false and dialog was minimized, then its state will be set to normal. If option is set to "auto" and showMaximizeButton is enabled or if option is set to true, then dialog will be maximized when it was in normal state, and dialog-state will be set to normal if it was maximized.

enableHeaderFocus

Type:: bool
Default:: true

Sets gets ability to adjust state of 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

Sets gets text which appears in footer of 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

Sets gets text which appears in header of dialog.

Code Sample

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

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

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

height

Type:: number
Default:: null

Sets gets initial height of 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

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

Code Sample

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

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

        //Set
        $(".selector").igDialog("option", "imageClass", "dialog-header-image");

mainElement

Type:

domelement

Default:

null
Sets gets jquery DIV object which is used as main container for 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 laout or appearance of dialog.
4. Change of that option is not supported.
Code Sample
```
         
        //Initialize
        $(".selector").igDialog({
            mainElement : objContainer
        });

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

        //Set
        $(".selector").igDialog("option", "mainElement", objContainer); 
        
```

maxHeight

Type:: number
Default:: null

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

Code Sample

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

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

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

maximizeButtonTitle

Type:: string
Default:: null

Sets gets title/tooltip for maximize button in dialog. That is override for $.ig.Dialog.locale.maximizeButtonTitle.

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

Sets gets maximal width of dialog in normal state. Note: that option has effect only while resizing dialog by 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

Sets gets minimal height of 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

Type:: string
Default:: null

Sets gets title/tooltip for minimize button in dialog. That is override for $.ig.Dialog.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

Sets gets minimal width of 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
Sets gets modal state of dialog.
If there are more than 1 modal igDialog, then last opened dialog wins and becomes on the top.
Note: modal functionality is not supported when 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

Sets gets animation applied to dialog when it is opened. That can be any object supported by 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

Type:: string
Default:: null

Sets gets title/tooltip for pin button in dialog. That is override for $.ig.Dialog.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
Sets gets pinned state of dialog.
When dialog is pinned, then the html element of dialog is moved to the original container where target element was located and position:absolute is removed.
Pinned dialog does not support modal state, maximized state and it can not be moved.
Notes:
1. If parent element of original target-element is invisible, then 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

Sets gets ability to automatically pin dialog when dialog was minimized.

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

Sets gets initial position of dialog. That can be array of 2 numeric values, which represent left/top coordinates.
Or it can be object supported by jquery.position(param) method, such as { my: "left top", at: "left top", offset: "100 200" }.

Code Sample

 
        //Initialize
        $(".selector").igDialog({
            position : [100, 200]
        });

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

        //Set
        $(".selector").igDialog("option", "position", [100, 200]);

resizable

Type:: bool
Default:: true

Sets gets ability to resize dialog by end user.

Code Sample

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

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

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

restoreButtonTitle

Type:: string
Default:: null

Sets gets title/tooltip for restore button in dialog. That is override for $.ig.Dialog.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

Sets gets visibility of close button in header.

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

Sets gets visibility of footer.

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

Sets gets visibility of header.

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

Sets gets visibility of maximize button in header.

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

Sets gets visibility of minimize button in header.

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

Sets gets visibility of pin button in header.

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
Sets gets state of dialog. Note: when dialog is modal, then pinned and minimized states are not supported, because that will trigger misbehavior.
Members
- opened
- Type:string
- Dialog is opened.
- minimized
- Type:string
- Dialog is minimized.
- maximized
- Type:string
- Dialog is maximized.
- closed
- Type:string
- 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

Sets gets value for tabIndex attribute applied to main html element of 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

Sets gets temporary value for src, which is used while changing parent of base element if it is instance of IFRAME. That is allows to get 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
Sets gets ability to process focus and blur events of child elements located in dialog in order to maintain focused state.
Notes:
If that option is enabled, then focus and blur event handlers are added to all child elements of dialog.
If dialog is modal or it can be maximized, then it is not recommended to disable that option.
If that option is modified after igDialog was already created, then depending on current state of 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

Type:: string
Default:: null

Sets gets title/tooltip for unpin button in dialog. That is override for $.ig.Dialog.locale.unpinButtonTitle.

Code Sample

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

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

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

width

Type:: number
Default:: 300

Sets gets initial width of 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

Sets gets value of zIndex applied to the main html element of 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 end animation when dialod was closed or opened.
Function takes arguments "evt" and "ui".
Use ui.owner to obtain reference to igDialog.
Use ui.action to obtain name of action, which triggered animation.
"open" - dialog was opened
"close" - 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 dialog or its content loses focus.
Function takes arguments "evt" and "ui".
Use evt to obtain browser event.
Use ui.owner to obtain reference to 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 dialog or its content gets focus.
Function takes arguments "evt" and "ui".
Use evt to obtain browser event.
Use ui.owner to obtain reference to 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 state of dialog was changed.
Function takes arguments "evt" and "ui".
Use evt to obtain browser event. That parameter can be null if state was modified from codes.
Use ui.owner to obtain reference to igDialog.
Use ui.button to obtain name of button, which triggered event. Note: if state was modified from codes, then "button" is undefined.
Use ui.oldState to obtain old state of dialog, which can be one of following: "opened", "minimized", "maximized", "closed".
Use ui.oldPinned to obtain boolean value of old pin state of dialog.
Use ui.action to obtain name of action. That can be one of the following:
"open" - dialog was opened. Note: event is raised before possible "openAnimation" started.
"close" - dialog was closed. Note: event is raised before possible "closeAnimation" started.
"minimize" - dialog was minimized
"maximize" - dialog was maximized
"restore" - dialog was restored from minimized or maximized state
"pin" - dialog was pinned
"unpin" - 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 button, which triggers the event. If igDialog state was modified from code, using control API, then "button" property is undefined.
            ui.button
            
            // Obtain the old state of igDialog. The possible values are: "opened", "minimized", "maximized", "closed".
            ui.oldState
            
            // Obtain if the old state of 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 state of dialog was changed.
Return false in order to cancel action.
Function takes arguments "evt" and "ui".
Use evt to obtain browser event. That parameter can be null if state was modified from codes.
Use ui.owner to obtain reference to igDialog.
Use ui.button to obtain name of button, which triggered event. Note: if state was modified from codes, then "button" is undefined.
Use ui.oldState to obtain old state of dialog, which can be one of following: "opened", "minimized", "maximized", "closed".
Use ui.oldPinned to obtain boolean value of old pin state of dialog.
Use ui.action to obtain name of action. That can be one of the following:
"open" - request to open dialog
"close" - request to close dialog
"minimize" - request to minimize dialog
"maximize" - request to maximize dialog
"restore" - request to restore dialog from minimized or maximized state
"pin" - request to pin dialog
"unpin" - request to unpin 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 igDialog state was modified from code, using control API, then "button" property is undefined.
            ui.button
            
            // Obtain the old state of igDialog. The possible values are: "opened", "minimized", "maximized", "closed".
            ui.oldState
            
            // Obtain if the old state of 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

close

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

Return Type:

object

Return Type Description:

Returns reference to this igDialog.
Closes dialog if it is opened.
Notes:
1. If state of dialog changes, then stateChanging and stateChanged events are raised.
2. That method does not change minimized or maximized state of dialog.
It means that method "open" will open 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.
destroy

.igDialog( "destroy" );

Return Type:

object

Return Type Description:

Returns reference to this igDialog.
Destroys igDialog and moves 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 reference to the top modal dialog.
Code Sample
```
 $(".selector").igDialog("getTopModal"); 
```
isTopModal

.igDialog( "isTopModal" );

Return Type:

bool

Return Type Description:

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

.igDialog( "mainElement" );

Return Type:

domelement

Return Type Description:

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

.igDialog( "maximize" );

Return Type:

object

Return Type Description:

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

.igDialog( "minimize" );

Return Type:

object

Return Type Description:

Returns reference to this igDialog.
Minimizes dialog if it is not minimized.
Note: If state of 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 reference to this igDialog.
Moves 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 dialog if it is closed. Notes:
1. If state of dialog changes, then stateChanging and stateChanged events are raised.
2. That method does not change minimized or maximized state of dialog. It means that if dialog was closed by "close" method, then dialog and keep previous minimized or maximized state.
Code Sample
```
 $(".selector").igDialog("open"); 
```
pin

.igDialog( "pin" );

Return Type:

object

Return Type Description:

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

.igDialog( "restore" );

Return Type:

object

Return Type Description:

Returns reference to this igDialog.
Sets normal state for dialog which was maximized or minimized.
Note: If state of dialog changes, then stateChanging and stateChanged events are raised.
state

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

Return Type:

string

Return Type Description:

Returns state.
Gets sets state of editor.
Note: If state of 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 reference to this igDialog.
Unpins dialog if it is pinned.
Note: If state of 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 ui-widget-content ui-corner-all

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 ui-corner-top ui-helper-clearfix

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-copy

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 Home

Ignite UI API Reference

ui.igDialog

Code Sample

Related Samples

Related Topics

Dependencies

Inherits

closeAnimation

Code Sample

closeButtonTitle

Code Sample

closeOnEscape

Code Sample

container

Code Sample

dialogClass

draggable

Code Sample

enableDblclick

enableHeaderFocus

Code Sample

footerText

Code Sample

headerText

Code Sample

height

Code Sample

imageClass

Code Sample

mainElement

Code Sample

maxHeight

Code Sample

maximizeButtonTitle

Code Sample

maxWidth

Code Sample

minHeight

Code Sample

minimizeButtonTitle

Code Sample

minWidth

Code Sample

modal

Code Sample

openAnimation

Code Sample

pinButtonTitle

Code Sample

pinned

Code Sample

pinOnMinimized

Code Sample

position

Code Sample

resizable

Code Sample

restoreButtonTitle

Code Sample

showCloseButton

Code Sample

showFooter

Code Sample

showHeader

Code Sample

showMaximizeButton

Code Sample

showMinimizeButton

Code Sample

showPinButton

Code Sample

state

Members

Code Sample

tabIndex

Code Sample

temporaryUrl

Code Sample

trackFocus