Create the best Web experiences in browsers and devices with our user interface controls designed expressly for jQuery, ASP.NET MVC, HTML 5 and CSS 3. You’ll be building on a solid and proven foundation without any plug-ins or extensions, just real world best practices and the most forward-thinking, robust Web technology.

Infragistics NetAdvantage jQuery API Reference

ui.igDialog

ui.igDialog_image
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 NetAdvantage for jQuery and Styling and Theming NetAdvantage for jQuery.

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

Dependencies

jquery-1.6.1.js
jqueryui/1.8.11/jquery-ui.js

  • 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.

  • closeButtonTitle

    Type:
    string
    Default:
    null

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

  • closeOnEscape

    Type:
    bool
    Default:
    true

    Sets gets ability to close dialog on Esc key.

  • 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".

  • draggable

    Type:
    bool
    Default:
    true

    Sets gets ability to drag dialog by end user.

  • 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.

  • footerText

    Type:
    string
    Default:
    null

    Sets gets text which appears in footer of dialog.

  • headerText

    Type:
    string
    Default:
    null

    Sets gets text which appears in header of dialog.

  • 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.

  • 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.

  • 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.

  • 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.

  • maximizeButtonTitle

    Type:
    string
    Default:
    null

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

  • 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.

  • minHeight

    Type:
    number
    Default:
    100

    Sets gets minimal height of dialog in normal state.

  • minimizeButtonTitle

    Type:
    string
    Default:
    null

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

  • minWidth

    Type:
    number
    Default:
    150

    Sets gets minimal width of dialog in normal state.

  • modal

    Type:
    bool
    Default:
    false

    Sets gets modal state of dialog. Note: modal functionality is not supported when dialog is minimized or pinned.

  • 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.

  • pinButtonTitle

    Type:
    string
    Default:
    null

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

  • pinned

    Type:
    bool
    Default:
    false

    Sets gets pinned state of dialog.

  • pinOnMinimized

    Type:
    bool
    Default:
    false

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

  • 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" }.

  • resizable

    Type:
    bool
    Default:
    true

    Sets gets ability to resize dialog by end user.

  • restoreButtonTitle

    Type:
    string
    Default:
    null

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

  • showCloseButton

    Type:
    bool
    Default:
    true

    Sets gets visibility of close button in header.

  • showFooter

    Type:
    bool
    Default:
    false

    Sets gets visibility of footer.

  • showHeader

    Type:
    bool
    Default:
    true

    Sets gets visibility of header.

  • showMaximizeButton

    Type:
    bool
    Default:
    false

    Sets gets visibility of maximize button in header.

  • showMinimizeButton

    Type:
    bool
    Default:
    false

    Sets gets visibility of minimize button in header.

  • showPinButton

    Type:
    bool
    Default:
    false

    Sets gets visibility of pin button in header.

  • state

    Type:
    enumeration
    Default:
    opened

    Sets gets state of dialog.

    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.

  • tabIndex

    Type:
    number
    Default:
    0

    Sets gets value for tabIndex attribute applied to main html element of dialog.

  • 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.

  • 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.

  • unpinButtonTitle

    Type:
    string
    Default:
    null

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

  • 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.

  • zIndex

    Type:
    number
    Default:
    1000

    Sets gets value of zIndex applied to the main html element of dialog.

For more information on how to interact with the NetAdvantage for jQuery controls events, refer to
Using Events in NetAdvantage for jQuery

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.

  • 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.

  • 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.

  • 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.

  • 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.

  • close

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

    Closes dialog if it is opened. Note: 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.

  • destroy

    .igDialog( "destroy" );
    Return Type:
    object

    Destroys igDialog and moves target element to its original parent.

  • getTopModal

    .igDialog( "getTopModal" );
    Return Type:
    object

    Gets reference to the top modal dialog.

  • isTopModal

    .igDialog( "isTopModal" );
    Return Type:
    bool

    Checks if dialog is modal and it is currently active.

  • mainElement

    .igDialog( "mainElement" );
    Return Type:
    domelement

    Gets reference to dynamically created DIV element which represents dialog.

  • maximize

    .igDialog( "maximize" );
    Return Type:
    object

    Maximizes dialog if it is not maximized.

  • minimize

    .igDialog( "minimize" );
    Return Type:
    object

    Minimizes dialog if it is not minimized.

  • moveToTop

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

    Moves dialog to the top.

    • e
    • Type:object
    • Optional
    • Original event of browser.

  • open

    .igDialog( "open" );
    Return Type:
    object

    Opens dialog if it is closed. Note: 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.

  • pin

    .igDialog( "pin" );
    Return Type:
    object

    Pins dialog if it is not pinned.

  • state

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

    Gets sets state of editor.

    • state
    • Type:string
    • Optional
    • New state.

  • unpin

    .igDialog( "unpin" );
    Return Type:
    object

    Unpins dialog if it is pinned.

  • 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

    Classes applied to the content area of dialog.

  • ui-igdialog 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-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

    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.