The topic that introduces the user to the igDialog
™ control’s CSS classes.
This topic contains the following sections:
This section explains the igDialog
CSS classes. You can override all of the styles and create a custom igDialog
control layout using the instructions provided.
The following summarizes the purpose and functionality of the igDialog
control’s featured CSS classes:
Classes applied to the main/top element:
ui-igdialog
ui-dialog
ui-widget
ui-widget-content
ui-corner-all
Classes applied to the header:
ui-igdialog-header
ui-dialog-titlebar
ui-widget-header
ui-corner-top
ui-helper-clearfix
Classes applied to the header in the focused state:
ui-igdialog-header-focus
ui-state-focus
Classes applied to the header in the minimized state:
ui-corner-bottom
Classes applied to the header text:
ui-igdialog-headertext
ui-dialog-title
Extra class applied to SPAN which represents an image in the header, when the "image" option is set:
ui-igdialog-headerimage
Classes applied to the header text when a dialog is in its minimized state:
ui-igdialog-headertext-minimized
Classes applied to the buttons located in the header:
ui-igdialog-headerbutton
ui-corner-all
ui-state-default
Classes applied to the buttons located in the header when a mouse is moved over them:
ui-igdialog-headerbutton-hover
ui-state-hover
Classes applied to the close button located in the header:
ui-igdialog-buttonclose
Classes applied to the minimize button located in the header:
ui-igdialog-buttonminimize
Classes applied to the maximize button located in the header:
ui-igdialog-buttonmaximize
Classes applied to the pin button located in the header:
ui-igdialog-buttonpin
Classes applied to the icon of the close button:
ui-igdialog-close-icon
ui-icon ui-icon-close
Classes applied to the icon of the minimize button:
ui-igdialog-minimize-icon
ui-icon
ui-icon-minus
Classes applied to the icon of the maximize button:
ui-igdialog-maximize-icon
ui-icon
ui-icon-extlink
Classes applied to the icon of the restore button:
ui-igdialog-restore-icon
ui-icon
ui-icon-copy
Classes applied to the icon of the pin button:
ui-igdialog-pin-icon
ui-icon
ui-icon-pin-s
Classes applied to the icon of the unpin button:
ui-igdialog-unpin-icon
ui-icon
ui-icon-pin-w
Classes applied to the footer:
ui-igdialog-footer
ui-widget-header
ui-corner-bottom
ui-helper-clearfix
Classes applied to the dialog while resizing:
ui-igdialog-resizing
Classes applied to the dialog while dragging:
ui-igdialog-dragging
Classes applied to the header when the dialog is in an unmovable state such as maximized or pinned:
ui-igdialog-unmovable
Classes applied to the shell element when the dialog is in a modal state:
ui-igdialog-overlay
ui-widget-overlay
Classes applied to the content area of the dialog:
ui-igdialog-content
ui-widget-contentui-dialog-content
The following topics provide additional information related to this topic:
igDialog
control’s properties.igDialog
control’s methods.igDialog
control’s events.View on GitHub